{"_id":"@material/mwc-checkbox","_rev":"733-38562ea548d0d1b2854c9fd0fea0aec1","name":"@material/mwc-checkbox","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.0":{"name":"@material/mwc-checkbox","version":"0.1.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.35.0","@material/mwc-base":"^0.1.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-WTAjk3Ha7s56IfRnsLD9Dp0AsNUTUooMEbMpDPgU+ZjZMgM+lknLiAWPSYWCDwwCbyO1ZtlBymRz7wqoLBFEBw==","shasum":"d8a47e8e0413474dd075bd60a2ca259929cb8990","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.1.0.tgz","fileCount":5,"unpackedSize":19816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8OmOCRA9TVsSAnZWagAAG9YP/1lU9wDLy7ac+C362S9b\noR503rZz8OAfwUKCnMRfJ/U9kURl6ngofZVcp7bOuW1leyURIAXebfC4sWcQ\nbSp/LRCYGq0OTnaF07aaP4L+YK4EFXVs7NdX81FUZSb8LmtljDZqF4AhE7AD\n2vAEtBaII4gLknHJ9ZMdQFoRjarFXHXTI5d6J5xrIcPMwC1GKWyWWi119i3V\nxDbZeCt5nPnddHAhPE9P8MrhUuu4YJKrY2q7XBMj0IeQVZnCN8mMT26etXRn\nosnhtqjRGVHYii/kGuXk0VcL+z119JN8R9RgQNLfcgdfZhx4AB837WeoNnGP\n2BKXjUTPArk0DUS1ROhzR7fIApjYN2JeMDcKViYHOzXDeDzF3frKBfSVV2n+\nO0FRcP2bBhzSQSI+i2SmfRMv8I66+Ngwr6weuYqi6PgFSlI0JM8DBo7oiYMp\nJa4R7TfgXDGtAj/RO02PU/IfHtNOE21fTu6hO11OnbywSNnxKzWZgNGG7JyS\nQ2BWztOV7uj6o8Gah6dZGikksju1I7KC06cGBnQEShj53mZdJXJ9QoD+28YP\nmkCZgAGMNjrPNLapv7Exiiauc4TMhji7KLxvYIAtqgCYEJwhkPnbKlosP2eo\nznqPBFOzexOPET13TDtaEO91HAByg47j5E38ZOnNNT8byucsvHgp6YXY8Hg8\nlwad\r\n=F5DO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiLF5/K2+Pi7VrC6qymNQwBh7+I4pXmB/fjpRPTzfR/gIgaDoxPrONMukmjENsoNRDpw+6FsIEZZBxbjjzvyoQz50="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.1.0_1525737868679_0.6267787667929601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.1":{"name":"@material/mwc-checkbox","version":"0.1.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.35.0","@material/mwc-base":"^0.1.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-2YHBOcBQ+teEbA4cvQxTgjH+w7gwBCJ3P4c5Iz39SNHRZxLM5arJrKMihVPlvmn/AvptW3IT42qjY6zDt5GBnQ==","shasum":"3da852301107e5a88853559d9d8248f323a88a15","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.1.1.tgz","fileCount":5,"unpackedSize":19823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82J9CRA9TVsSAnZWagAAU58P/j4mGVGGO+6gSg3daHg+\nKa7E6fjaLWI5P4qlIvbWtxjMUhePW1OonYwphxd98IhX/+jRrV1p87oQPvrs\nPkkz86fW5pi4MM1NeKoDEiNdByef1guIsm0dV5tIOg+h+sgZEG9hOmh0Gh/+\n6jr2/5WM/uYZ2h8b6y141ZxN1R31CqyA4h1oD3pKkysHDs+JZgozSjvWloNg\n6pf23jK1N5HWjx9r9BYsGy9305KKobF6XK+aa+qds/dY9Arg3Yw5h+JwHYTg\n9JlFwwrkj/01yQ9zuFkGJNt5bDs6gK3beWXrsrcXgXmgjcWx/O2WEqzqx7lo\nrEe7hOHKi37pWvme3KgqpBEdcKjE5qktSTgYsjTOcRgx6DZhFdL7nvicuS1a\nuK2b/XuRxpmlGL9fDkqtyzvtZsV0vNp8nJ6djE/89BsPtgWRN6DQqNQ+3Q5w\ni5Vjxb1WBsx5bFwddsudtyJCC5PtxXQHPHya3A0u31nHCUl7pgHaIh7xelRn\n0RZdlOJEfT6qIztOuPR9h4MvON80bJTPdKZeEJliYJHJWMyRdi0PHjoFqmPR\nfNjyq1FV5K2FDDiE8DERmC6Klovngn9zMPM3Y+AmfjkCXUjoEoVj9JOq8TDu\n6zAZ2q2gy0E2kQr4JvJ/iOjZrVzabtZp2yrj/zoWDvnRPpyZllyg9oHYRdBD\nNwB5\r\n=K2lT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZceAt8JkqiAc4i7q+JLYP4gFRnIPUoGBqglplhRG1RwIhAP9jdTQyAf62ThyLo2IFz/7ktJ5VnFLzxZ0B3K15ASMG"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.1.1_1525899900282_0.5754223568867893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.2":{"name":"@material/mwc-checkbox","version":"0.1.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.35.0","@material/mwc-base":"^0.1.2","@polymer/lit-element":"^0.5.2"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-PBn8RVLAmFsVlhcW+gtRmEMNIbDe3qbYT2ikcmxXxxhRDrxRNgx6kfeT5gP+gJ4jNF9atr+eC/zoltnSI+9YXw==","shasum":"c73a3f1a840c65eaf6fbcb14fb0aa1687c5eb9f4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.1.2.tgz","fileCount":5,"unpackedSize":19823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFTCRA9TVsSAnZWagAACq4P/j36J+crFDhszI8mAfVy\npx/IP9VZ38wxuWvjzSkFuXYC4GNmeRSDG5scY2f0aH7QpfWVK1SvMU0Ktfk0\nKnCwPjLRFrGNLJEFZBC1BYEw1zmBkBx3AGYl+UJsteYz5HK+LfVA6l8zQoIn\nVn+SipklmtdfuBCftsLppIKFU4EguVglGz041pmdpuNy6a2KiKl/zQnmmoQO\nibfLNX87radjrDy3cDYKyRElHNDr61agovi6c+OkQyydwcSOv0ZIVuUpvo3F\nDSmQmovuINpTl49T6ozN4zC+QQVtdbilBFCzp58DVGE/W8frfuIjDKCT3AA/\n3clSM+unuPXUH/Ws7sm6wfzjQUidNma04Svv5ZPFZAQ14XZwu/NOn2mUJV1Q\n6MZ4LsN4ZMyTGSUyUoui1x7pTEyg4eFT0KLpV5zq+spYCnTTs0cUgGLG5usu\nWLdNxWbCOZUudKdzxI0oRTAog9x/ORInepDVK5KVQyaXZ/9HH3Bp2h1QzNkR\nnwktqeayXm5KzeN46aNjAFjm+Hqlv1XQfGRyNFUmqPYoW9mZ4y5di6zmHV8+\np0BetlCKs6DsoJDDGg62n4X2yZmGeAiM7dRMr5j4chl3EwFwhiJv/1rTCsZx\nxBqTBU1O84KJLnia+7vwseoqOeDgYKfHZLSb95Kxyi91BJzyH8X74DXsXgML\nlSPk\r\n=FUaV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGf5kcPltwrVPFnKtTKs2+IjZdP0y3e7xmYS742B5NqbAiBwxotKdprvBM/1gb+WmCEB+Ms5U9K3rZButHAyZlQrSw=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.1.2_1529016658673_0.6563092104198593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-checkbox","version":"0.2.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.35.0","@material/mwc-base":"^0.2.0","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-1R5QdHij9ElRvKsitt2uQG2Yjk8ok1xjqb03+Po7T+fifZOfdHJtC4PBwGBupbPLtSAgMnyvj2Z6v1MkHmRc1Q==","shasum":"86cfdc39edc457b748f345a52dfd13142134d902","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.2.0.tgz","fileCount":5,"unpackedSize":19876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKPCRA9TVsSAnZWagAAFW4P/3fGHsOeypPIv/4F0DO6\nYhZdRCn54NhK+l34hD/7hG2llkqMQ+PabmUytwgaHRb1qSUMogWdmOrj1LQf\nfnGaSpljNESJPgZdD1Vrjltb6PkMvjaiKwdtxbpsXcExD0e/GmXHo8nW4BUs\nao5ox8TMh3Z5EZpEC6XSGXQo2zXkdSNMUKg+rwLSixLLmg8xb5qIgBH+rqqx\ngsBXcIPzUHLXmEuqbzKA2k7xH6lUq8pnIZCw8T0hE2oRltK6wwSS9gjEmpmy\nCYaaUfUk7Xp4W27URpGlSREIGNI5URtHADT4pz78QD/H2KJWZVNNT5VVhQWx\nSUr4Mvl8jRbC8FQSVdx99yHm6Th1uj39e0BMNSbTOEBadhrzWYfmU4DKVO6Y\n60dW6FRygkB3SOMPkIHt4TV0oCM3WhOuZgA0NqRLDYvgPbs755Lk/mp6yu+j\nQ6M8H+GvaPB7a9o8zBp20nFIsiydOG/A0e/UB+a8uAaoT68BnksBPhnSzzeL\nTCm8O5I/TLVsBzqM5FLwrRFAwStcm6LJUg/iNsZKVEgrA+RIkcxO/VQy1C/h\nVBkatBTpIb39vW9EI/GJCj8CC0BCTREvO3Y3ty/GtCw3nC4+vZjyMLncYNvF\n+Gfqpy8ByMBYDgQC3+r45f3l+D2qp4gmAlf/Hgg4y0+4RMDe55t2sJtsnwWX\nZ8wK\r\n=zhBX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYw6njpc18vw9qOO7BLkggEsApHCYXAMk7Q8qAiqRl2gIhAK/cbsaLrBrYN//BrXrdCZzRMpMOKn/5YOZYd0RAo7nq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.2.0_1536885390901_0.34145574345223806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-checkbox","version":"0.2.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.35.0","@material/mwc-base":"^0.2.1","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.2.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-2HOKn7VdykqmgH/uKC+bnXTmmNHIaKhUEU1JmnIYW68fW/RFAQNrJU1RCmBD/SNXF0qjwRJtCZKm8+774BQxdA==","shasum":"5b610050e20b918c2040f5ced8dc5344de813394","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.2.1.tgz","fileCount":5,"unpackedSize":19886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQmCRA9TVsSAnZWagAAd7YP/24OhU716Tir6yfbMLh1\n1aJJxLV6T5C6A/U6PjWORGKkqfXGiJRfbAgkKNMINZLXGBA4crA/PUiliM3a\nCJB+FfBDZ8m3QoMclaRXBhkc8MRB6Yy8u6E7SAe4WJ4IAc/YOP9vvy5xntMA\nFhLgQapZqE9fKuTp1xUl6GFur+UZ6y3YJqKNZtYHQ1+u0jiB6hkzHQpxBwD3\n91xvwJbwe+1C+qCTRHXG81Pk+hVvN9gZUjGlWrn5iseD6CK37CPKoOaBbWf9\nriHrbKaSewQq8edrBPOeE1GLQPEASgWyfVRCJFEGxfOLZBW4pnGUlPMQJqlp\nzK+DRuzttzb4HyUWBueYTdykrQKDi2rrg1lOT2/ofF2Ys4tEFmgYQ75VfLTU\n1yNPTWxDg5i+f3v1s8OvbcfTXhgXBQEDhtR2Jx4m5+f6FlJk8nQ+4tYs5wtx\n3WRiPcHccV92j/4pFNCaTobK62i10KOrJ7I8gjdwPIKEgPSnC9yQb8fuEOZI\nVh5chcSYOrP7Sh6CQh1u3ZjNWH5GZBzrCG1l6Whjfs1LelTolWqVXuQ2d+sH\nhUm/ZSPYhwmtUtg7Y7UD+7UJbj21Rc2T2uHSqnbz9cPXBJ3xqGhc84UZwYML\nxJ5z/kTUWftq1qC3X7kmkK1+C9Jku7JAYkGpT9g7V5e9sKE49QE86raDSYCq\nkm4Z\r\n=drrp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNivEyAdUeQIEIUXfjqegte/XwsUjXICSaxrC0dewdnAiAHFD1Ged3Enycue+2maYt5tLPOKX+/kuHtxUeMAUb/MA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.2.1_1537578021380_0.5206750368322126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-checkbox","version":"0.3.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.0","@material/mwc-ripple":"^0.3.0","@polymer/lit-element":"^0.6.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-N4kMbO9YYp9ly+pGrzhxutDUYRYYI9Meh8cuIg2phSEW8hPkjIBaz/oCjAy4KWEfofRPwT2c8B5SralSCsum0g==","shasum":"bd5c237b70c641c32a107533a3b9341ebab89eff","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.0.tgz","fileCount":12,"unpackedSize":57994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGHCRA9TVsSAnZWagAASUwP+QBtTjM609M6jksMn+05\nV5KtqPwSq+mxANSjKpbqVArCm7xIcNmYlDhE1inBEBjwDhUYnWO3M/TZ9uT8\nzRZlPBXZU+ZAvNwU2YrTm3Hiwqjikobw6cuLPkUkagXwRvJBhbTCoCJSMzAY\n45DAQl/AsW0gbGKkDCgATPrmFHCSM3XLD0ESmqeqKmdAkxM/BgM+W81CznR7\nKYXlsKB42Ub1swI3SI4+9Q5sPP406yf3WksLbVBUS0wCEko8IKymA4Fwc5uv\n1sPqSnUOz2H9wYAoMAc8pepXB3MExngBazlTbmFET9AO8wFhLhp2bif056vs\n2+1EW2nVVRya+xBZCTmtZy13jqSxgzv321as2DjyaMumg6gTLJi8QEUPpqA8\nAuq3Lz/Rk3kngxnAbOlYrOmXO0eBL1pnlyEzcKq1+mfwZjNJFl7JvtAbKTBr\nd/sG7ItOy4ObjF+PbphlaSnDPhutVT6lJVmIN/joksuGKmyIjVr3hGkD+i9F\n9xCF3TaEIcc0m4wkdtaiRyK29I9O26ou/dwx4A/rG/kBSVj3Keq32MSl+IDn\n6K2+djhqZqemI6MllmyfuSD21pNS34twYCToIwwBy8yRRK7vUjO+eQ+GTbw/\nwoz++0yd8b/R6aG5HGZ1hm9bFB0wGRRnMIXZ1830Tra9Md5Em5ge9uluLR0S\nEkHo\r\n=LqfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkFusjl51NfMWF67hWgupGPYqDuf48eUxoviLPkpb6BgIgTfkUSHnih/atCbhsXViQt+St3cmBnIGox2FH284bMMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.0_1538695558326_0.6071134146483896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-checkbox","version":"0.3.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.1","@material/mwc-ripple":"^0.3.1","@polymer/lit-element":"^0.6.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-ZSoebjF6oetvQoQGUUE4MwDkGguXK6KO2XXohvCfiUg++L92Yit0XiQWIotHxbeC03DSCZIShdkDeOyI/3vSuA==","shasum":"01970b58b950d3fb6c93203c5f5083d872469f70","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.1.tgz","fileCount":12,"unpackedSize":58033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64PCRA9TVsSAnZWagAAiv8QAIATObBoKlftJdURnSO+\nJPg92hMsDv3aL4nqX4G/eUJ0mfj0J8aa3Crq45qpd619iNG7At8FwLwdJK5o\n86Bi1HuSdM7H4jZAxm8Ku7x6aNJiBwjI6XPmKyiAeQdV3E6NEFCwBKyNwIRt\njePmpEx4Gr7pNSYyqeqgNxuEjhseynB6rTwMLm/sR98JqGIGBYy+ITl6eoNA\nGlA0uxshxe+FwQdyHozfA7XMaBSgk6zhmerz3lY/ON1Zftx+ao2SUzUyGXmM\n1pIZRNk+jWtIXlza7R2Tf954Rwy4YhvoBi6Gm58FeQbi6JqehXgc/Uz9SM/m\neelJTrHlt7zW8ms2NwusqLlxgoTwpUOAm2EfxmqGUIlr8C3X1f77R6532M+w\nMG7+AHw+1RV9P4H2PfdPG0wO3DqfFGyuPT7IpwP2IA719/X+pkWfVGkm+qGU\nFiLZa1Tp2qqycvqi6I82wQG/RoROi1LHJ6vdAzdbiKoDNjodIrsUNtmPxP46\neRsMItwOvbyLEYONyB5U+sCALf9r9KzlRMD/6YXG2F9e0/BYPfQM+WNgWqF9\n7JcTqrkP83SrBSn01kebwZLH+ADibe9+5d4FPQUw+dl4/z7cxIFwYRHjBvku\niA7WFX1F0rjWNjhcwHIYtoCR1HqIkodngyZaOHmOS9a6qgjw8mJOHj0WyoZk\nsUGf\r\n=bi75\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClaHrCfz6cFJ7PNPLZqMVurf2Jz9KNFoE48UURUfuhdAIhAKTm/bV40RbVhH7YJVHZ38pChzcrJMs90N/nPNLlXxEZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.1_1539026445632_0.05618244641453418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-checkbox","version":"0.3.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.2","@material/mwc-ripple":"^0.3.2","@polymer/lit-element":"^0.6.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-g2Qf3AhMXpoOaj0eEgqVv/IaUIYIVwu0V+UHCwkfuOPQuIR8kEM2Q9i50/LVQKEqsJ8k82NXeaBpgzo8lOJKOA==","shasum":"a27c43f59696133e02d4198948f885b602536ba4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.2.tgz","fileCount":15,"unpackedSize":69014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eJCRA9TVsSAnZWagAAngkP/0A6HEhOWme1chpNwpNK\nsw1F1w3bWE9Roo6zadsKxoY4g42yW2vPCn16VfcvI9oLth7nFJxbTLpbLqBv\nfvqh/CJbrCyUPhCIW4wEuc+Dy3LabSgzmwE9nGlN1HMuE63tjDFQY5bf1oxy\n0xJq6wFTnr/Jrs0GivxzJrB6Aa5GW1CZ+soeYh2ITHvImSrTwFVgO+YwmAYB\nlQjuIM8wnO9CbXsLm8H5Up9tm1LXKAObERfkFsZ+8b1zr8MuREhZKCC5dVCJ\n3+5Rmz5lQHnjQy7cVUp2opT35j3t1PFnRGUJIdt+7dIpwNwoB9Id1K84JpqT\nYfleJeM1grV12OmaVQhh+TJXfhjUjyohaRqrrG8T4OhITCaqW7xcHHHSlw24\nTQwe1C7Lr/zON4dj1kQRne8ea5XpTzEQ7ednbJq14eI0Yhsr/y/dv5GyDxkR\nxemGEBnvC9tcuiyeG4AcznRk3zmlkJj5K4AhkBvGNgN6TjfjoZuVrmWSwTko\n//5bvV3NYDU/CsoD5Asye2pRZM9gGcQqQYIYLGzTYZjmPIHB8j0jchkYz9u/\nGbjYOnjAuSRiojA4/FJB7xARgyfwuU0MDubNlUkHVEyrnaHIDxJEvK/F/anG\nNJJUZBDQgjgqrkOrr3b4Ksu5tFcyTLu2oZUVq1CJvXucaHrYDJSbvx/kamNS\n01Ki\r\n=iTRg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSYhZJVH29vtsQUZlNnZFKDuc3z6xFGZPk3E0vYzS7jgIhAOZK2NU6eUGnWZ3YGa61yYemcMyvXuHMDvfiNBF1j3k/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.2_1542420360458_0.5886019373894003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-checkbox","version":"0.3.3","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.3","@material/mwc-ripple":"^0.3.3","@polymer/lit-element":"^0.6.4"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-dtXZb4To0ZeFbZcVrXuDWHqbeF/V6I/QwLKo5aJpxhrb2+8bhTw6kYriVgfc3RftCGPuOzCTV8ErXVugWSalwQ==","shasum":"716581b4dda2e14bbf78227b59215f0e6d13aa3d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.3.tgz","fileCount":15,"unpackedSize":69014,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEeCRA9TVsSAnZWagAArCsP/2JaJLPZDQmMC8mC4mWB\n2jtxsABJDELL2H9d+5znsdYgaSXRRTRClF99wf/NFBEHzpdRe+9VFDOfWWGk\nVIPyzAgGYvncF0IaOhwsrlSg5UehyvDM6LWHQ3rPLeCJCfFA3tfPC3qrUvvT\nP2Wh3GhLQaAtcaNiDHoY6bKRoLW6hKNcqYMXW+rV94EIzGnvzdosBLewGVwJ\nn280QpewoSe5n0GLL1p9kaVTHHYSdrGgZclhF+oVGtU4dMDYvXbVVMR/+efq\n2Xv3zSX8Z0Vk89uSU6pZNlbK/pOPEKF5QU8Bf9kXReVneRPtESxJ08chxvK1\ng+/Usk9f/2cdWUHQAkliJFg0kZ5FpQikSwBt9ujZVtQ6pVi/qJZHHzOWJAsp\nH+6t6tRMMNo1FnPm6BnP39BCPi8jLx1Tbs3OBPTgtpSKWP6JF96eEIjp7QVI\nVXeN+56rr0babTbMK+xn1qs3yd0EPCr4rNWGFVYxau3Ld/xjynQA2ZBL4L0p\nwG2rBUZMIdgNSj9J9o+rcG+p3hs6tptwI8MAL1AusGQQFDXUqP27557BIktQ\nmsm6zHQkcxw7KOnZ0kY/4wO9WYHt08c4EPoixFnZ7q/SUJvgIthBB6oXbBt6\ndGLdOMdcDiXEW5gpRLmUfKaAWwn7tOi8lCWIApo0DDjSAaHBJUeJlryIWD1W\n8IeB\r\n=iY0B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcv6KktXCZfNruqC8nDHTlTInnQOuYWgUw8SHo2snMbAiA3rZTQ9rO/OZHcRyDCuJOYI2clj7nMGWQCL2aiCyG8SQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.3_1543885086074_0.6270359384782396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-checkbox","version":"0.3.4","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.4","@material/mwc-ripple":"^0.3.4","@polymer/lit-element":"^0.6.5"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-fcYrRiHCCfEybLl9tFz8eeLfaoHIws0WCcPwmMh5ulmCEWw9p/VdxMsUwDIFVSCjvGT1Kp5rqdh6UwBxR52GSQ==","shasum":"6b4b53f71764668d812d9f02cf53243304d05559","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.4.tgz","fileCount":15,"unpackedSize":68994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsN4CRA9TVsSAnZWagAAJncP/RvaUWgAQAI5xbRdMB/v\nhOkC1OmKZfxQl5EnOFe7iF4q2lfAhU8nrwfoktCxHepDvVUoQfhcF7Ad9cQn\nzXkapK1AEni2dn4XkVaLM4aNKep0WRgBN/zniFgnLkAjFrUtGai1zjiGb4Ys\ndZLGLVZbFKQFCOwPPjbnJ1sb5biDaTBuT55Fb3kvMFL0ACyx8XPlPzDLPuQc\nHYNlaPS+fylZCYbAGIP6tKCWldpe7Xn0MaXY8OiLGy4ang/qA7PK4sgIEFXN\nCVqQCx02lzkqz3e3cRfRJLbXruog8qbLfEMWaapRhvnH0nMygW8fTHcQxG4R\nlmhB5dOdtjw73+bmfYgSSjQZ+KEZvLx3Sy9ICeyHwh7ygnRgMc55oIISu7Da\nqTNT4NS12QvGS0eOgK9CgEKs5rFyqvZ+wJRc7qiVwxx8rkjI0i8mqmObJnvW\nhoP3sHAQop1W8bfbS4xCxNfn2TJBMRAYydeGqavuUt1HJZKgmInFinEF5H4L\nGb7qn4H3gCm4yrkq+m+b8iK9c5UHphpigQZpcsD/xDMwj6XMnO5TXtLAii22\nd5noebnk3ByfGYWZJa7bsupFBlMNEeiS+M/Pi+GjFjdzlHRJCQnuCDicsr8H\noLfKJZxPrMT/FS83/ZC+sl7oBB38l0TDOTFtwFbShoqDcwdHnCFWGRNM5Rs/\njHrf\r\n=OL0h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgXdl0ifwZirXCj5dP5Tn+VSKNKfUr7zh7zi1CuXJTSAiEA203NdR3hNPxF4xswyThcIhTefxztmFarEydJHNqVZ34="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.4_1544733559441_0.14227213930091898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-checkbox","version":"0.3.5","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.5","@material/mwc-ripple":"^0.3.5","lit-element":"^2.0.0-rc.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-u5cMLdhcfJe5z3pt7sHzQdWzuiOK/HshwCkF8oRIAMQeK2/elhh1JS9jDIU9ADCHuOzOGDFpMdi9xYyWNISFXw==","shasum":"c9df689f0c90c44da715b53b4eb85352315ff946","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.5.tgz","fileCount":15,"unpackedSize":68964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXPCRA9TVsSAnZWagAAKx0P/ihAut7rR+rbyUX0FbZJ\nRyiSbm93kbiSWSd2bPT5T6tQ5bpGRm+jxX0+6EdIcBE0TCLhQuOIeJhtqZsC\nu6PpYHUmU70bUb4UrBaRilommib5gFXtQb5iyGDRwYq+hYQrFrU0zIzifLLM\nf8up2lxvuhBjH3Rg6El5WQa4rGT47Ig10eGhBt7xgw7kc6GkdD0fyx24YvzN\nirOIyfWUVzWlUfVTskJgoa8+qpMkJwAZhONC/bVRUStoFsVjWe0z8kE/Rutv\nsRUd1mYb55/adt52ephiv7bOEwRoDLmuxQp5Dknvs0J3pBhmTQ7gFOyGp5Ml\n0bzk1Nmd7Wx2J/q/k+5Tm7m+/pq7FT8JdXWX9z2IpQsz8pmkpy/Ph2av3y3v\n7LzqxTYunC06isb9jmzye+B1sKWRFpxNdmaYTwmWS6qY2Ebb+hNiyjLrTC+Z\niVFroIDjGJaGm8hwu0SELZOeN5pcfF2GE4aVrtXv1tS9MTxrsBh6z30tuzxk\nolD8LRBw+EMmvMOwamjA/4x2izQHNcUBYz7D8U74QjOU00Gco35OKWcQuWj6\nNUms9rKu4c/TCWndmj5NmC8mz7STDtf7ZHTDFcUtT8ij01qaKtnD4b+5kxhd\nukRN3nX+CNrzhfPzCgybEmwLRvLdx7JXiJVCrNY6mhsIeTLbi+FnRb6CI4ES\n6i0B\r\n=1wrl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGcFNHGdPz+c7uenMssoZwPnl+9bHfjujWuVzRvRZY4AIgQwsIfotWFCccsdFW7ycHuluAFQ6/Qc208pBw/Q6KDNM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.5_1547245006770_0.103136684745325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-checkbox","version":"0.3.6","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.40.0","@material/mwc-base":"^0.3.6","@material/mwc-ripple":"^0.3.6"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-pdhYQhI3J9Y1XMdQ+bMvBX4MCyV76JhmD+NCXC3JErheq3dzWtjgk/lQUF9AaegooPpVwVBybQc2nUISte7U8w==","shasum":"0b97574fafe8311fcd0e42a3eb2fb60e41302495","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.3.6.tgz","fileCount":13,"unpackedSize":63034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+eCRA9TVsSAnZWagAA1REQAJNGDJAoi07+ZiuTNsm3\niagbDBzMmMQxSeAadJh7DyUNNmh0my4r/o9UXbplKbvz94yVdAilE9Cw8VH0\nYuAzU1y+l/E8iGJnuDj1FB7mHrAM+d8hE0x8GYTw2dplo4ImFF5DjK0wxhLZ\nP2O2LnpVYh2YxCFAn1O8fYfyA9vJKtnK5rU6USj+pgR7Ni7Dkj42pwoZRFVp\nOwNLwizee4WP4sJFEiPabBbWpubpxK9NnZKdNPkL7E1eKVPuFv7umhNoxK7i\nB78hQK/tzYmnCaaSfIkGT04mSKuP8sOl8PsxxjLyy6BbHZPUb1gscOvOWkVJ\nm04VmL5hFOnYTLxF09AKwugY6ANc61zf+l5VZ0oPubFWebAS7f39vdmcP1vg\nYK1NZgL374vY4bIjuugztS8RDlf1CBmtzby0s2M/CEEwM91QFjoFbyCpZE/5\nsId8NL9Rq3AtW3C7RBZTQQ78gOuU4bOzqQI8f8K78UZy7oAzMG4DrlkNEJ0Y\nMSA+yelgL2znhX2MiZVSsrVkQTI1DQm/mlCn9A2hXvoEQj0XqtATIcJycKYO\nSoR78S38uU7I3QdFXtSna/M7k2UPym+j/GqLcT9Daq706DdVQWl6XQHcmGXS\nUVkPYZun/XJ52Est3TLZ70Li0HLpazrSNnirL392gNvvYgN/7oAxDKjEZrto\nmEzh\r\n=xXap\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGStw1EpiMfw4kXlo+ZetBwCb0fPR8XIuJAnxSEas+NyAiB2nfPsb3JDstHXyqM2rtwzlrAKfZZr4cvtUh57ANdPIA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.3.6_1549397917917_0.14608800878939632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-checkbox","version":"0.4.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^0.44.0","@material/mwc-base":"^0.3.6","@material/mwc-ripple":"^0.4.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-pbzOPXfgWHgwkDFlpVuroX7/uXqea7xWSdVB6h3i+N8yBG8rmI4F7RPhudowOqspzRiToPqt/5MhZvT9WcT/ow==","shasum":"80995414134030369772607f08feab30ad47c44d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.4.0.tgz","fileCount":13,"unpackedSize":63034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbXCRA9TVsSAnZWagAA9GkP/0OvFE3PCwqhQfKhh5wf\nR87lvQTmjVlCr9oaDY849eMnAkbYJdvBihHezdOxJwUNnHdc5E/cek0nrNCQ\n6KzntJeXCnS8y7KEEwqguuL1hnp0EDpE+z7PEn3LPOh3S5PYgtS7shYGatm6\nzRIUV5fwLwu4Hvul7CLye8xtqU2C4hIu+wYphEXKT5INejlfuwlHoK4XpNDn\ngWmscvwSi6rUcl7C14fRbz79NH8PeW6a61YpzjnmLrPKX7G5+PYScWw4bJd/\n6skJWRt4hf0U2NkzzlR9Xy9OSWjTCVlbx1NEw/eAMX/u+eCh1ZeVzxqHVT4F\nJhw/Vf0ZLIsh4lKOPfrnTz/McX2nrN8bp5bbRgtbNpkcQqxhjApi7pNamc7U\npuLhEunRG58PxDC7TyrcU8hqRzpb7mewKf6IeJFuT3y2sOpyWNg2OVYlWuh4\nQWp8nTXSsKyikyJjU5bS3igNlV1Cy5QmX4h2/91ws6EFAv3z4TjIPesz87vz\n2e+ge4Yl1WCq7NTFDq42IHIim/ZSQ3HIbqe/vNWrfW/NOFfsZ2Q2CK4DZw0k\nEWFOCtjUZuwfBHtXDbrWGtAgQ93X0qj9zSmQegP0LKHIgAzcawl1/UGYpLeB\nPjsb1u8eGClLRUubngLcLU3DAv52H7+F0EdcSw6/VIkbrGujpV5tQjJfOecX\nr6P7\r\n=jD3S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR8adGn5wfQuBKb8UhyUvrozoTiIaYD+DpEfQjW732FQIhAJfHXtfmdTROVZOzUQ3LEp/0x6XoDZTlEYEvDGmF9c9C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.4.0_1552348887141_0.662627783535015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-checkbox","version":"0.5.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^1.0.0","@material/mwc-base":"^0.5.0","@material/mwc-ripple":"^0.5.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-5bvgOqhcZvFpBLOH1roFQDnzf2b/6HNAeoEX2H2PsaFMgZx8P3t2nhBUN+GJL314MQbtvBV0XItUdP5kQz5lfQ==","shasum":"4356b76dad0972a350ad8d471223185b352dd4cc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.5.0.tgz","fileCount":13,"unpackedSize":63019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqn8CRA9TVsSAnZWagAABOAP/2K98PwrqI0dkiZ7T6Ic\nUWoA3IAQNukEe2D9ryEpcOsDmBq1eCJhN2KeHdT6HdD9BjCaC1eSWHCcFznR\npbWhu2gVi97++TCsunChrGA24Bylm3jt4KNWkkgSf5Pc2GWCEcYMOMV5B1Bg\nNP5CO703hbXi1+rAYt9uL2R2OOc7k/GOJduf6fr+rBDiTHxCZlLZB+RlFpNX\n4Ej/jf63c9iA6DNdxiSX3reWTaJLjSKZaEF01xJvPjpuN9+WC8AF24STZRrh\ntHCUTwIfk7JLimTrFg9yLAQ+hU4C/CPRoMqFHr2ZbSnZDA0e7BUzT2hrfhyl\nFZ1KjSmFrdo9L9kwooNRdFOHL1zgSsu/l0l8eihftlq8eG6wXw2E9iuOddSG\nmxDZzIXYyYu09hKi/+5040jGljnuv0r7RdtDmqPjUguzJISAJiCsz5S5AWm0\nvuegmrcLHUgqIMhB0y4uz8LjYegOpYmhtB1gFVerb5+P5K+WH1aj2dfSvYCp\nUKIFdQHIsik9T6mKKEMziLJVuItu83XLimsFzWooxY0XOYiHjX8+1yoznwKd\n7rjskWIcDldVxlqXgyI87Xj66fFjOxVbeARFF2HYle8zg6KZlQYlutRLqqYl\nsQlyZhEcHBsZKuWi8ES7qYEB7oNWdjHO98yz2o/UNVpvsUDqj2Y0NgqxaQOD\nl1pD\r\n=7grl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1QyB6IPOrpUeHhxF6qqIxfKN8qXi9M0DCAT3c9+iyuAiAnz3/+ITk9a+Aoz7jZgRn42kpQ/mqciruLjabWkLDsVQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.5.0_1553639931439_0.5408883436273653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-checkbox","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^1.0.0","@material/mwc-base":"^0.6.0","@material/mwc-ripple":"^0.6.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-EbRuxpH0Y76X1Hp+96/JpfZgXn0Bxhqe4ZuTlzp0m3Kgc/rB9U6mqCT/8xZuOsmvtc/+bM+4fV2Jr3B/b/Rpqg==","shasum":"ee94655dcc313b520db1ab1c0b6d017c8ba8ce9d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.6.0.tgz","fileCount":16,"unpackedSize":300777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAkCRA9TVsSAnZWagAA8k8P/jCYbYupYwJl+39S4l3j\nJqLuQ8vW9vSmCOwvaKMm6piAP6BblwdEiEtmRbqiJzFT2/fANtKu4BAXLcno\nwmPviJyCjjI/qOTSbp+xNN7unkFUowSWqmgBJXrsc8iEsZnTgDIR+fkAQ4FH\niCWnWKdAJu4I7xtRpnntk/UTBUBlLorQEoFjPpjFj1VXleERMiifYAK6tqun\n1MkQptTt2xqDO+p/HchXVBb/xNc1IzXt+L4L/6Z1HyP3gDrx96/OOhHIn0Bi\nU+mPQsvGqLYd9PcFv/T32LPTFV/wLuIAy6BVzC+ilyfFws0uwKwc1OqeNYS9\nhOVeWgssFtFmc9Tg+egj7GpND3AKrOETNUzmLLnoiNJaRo2VsEtZjMDmfiPW\n4j534k6KvTdYxEeKI9I8vuipvIG4SburokC+ne7knm3nWyf61bL5RkaA+3OM\nRSfYFMdfw3jsMuYpGdmaB6bFCjWsYDj0hykXZryQkRJehNXd5rB1UvT78u7p\n9IiEHSvpREpUpG2+GOXmoBDssdY8s4TimfjaY2nZWZIIX8VFAc+hctLaQgrU\nVApUh75EGXCoYC6LYR0SHLOkab4uNJnmlhCeSZ74CL+/S/sJaQGAIZgRkR62\nLm4a6xH9fREmlXzvPtVLfrTKm20zkmkrZzA2w/7tS2Pl+ngnpXOIV6tyUyCw\nOFlM\r\n=a3XW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAHNPsMF8pkUuA/2y31VrHr2oouKbuWtGjDEPDUSUvs1AiBSITh3XisQZjsAgjJZf+Oa01WdEzznjHut6JThbyqnnA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.6.0_1559773220406_0.14023125862491348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-checkbox","version":"0.7.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-ripple":"^0.7.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-B6j3rQ4moLyImRjU0nyGb3iUXlNexGpEA+FEVDZwVrw9BEUAPcKQkru7lq6mmeR7VJZx9WEmXznWh8n8dSMfzA==","shasum":"3819fa62ad81b03f85891867601c7ec4a95c8154","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.7.0.tgz","fileCount":16,"unpackedSize":78182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9hCRA9TVsSAnZWagAAwZUP/i0+AYZ/d3VLIPY0s8NC\nMmRSTHQRXm+X+K8CMH+sR9/dER/JggWgWK2KnRGqn+y0rChxKAhkPGIsJxgY\nEf8tKu9j3JmyKG09gnu8v3P9QoNUxb1PdEZplWZ/4bomw265Vld9UnJdMnSl\nToIKwe2B+FrbMk5fVND8jxhb3naGE4Mn8H8ioHRvvRHwhtDfBiAvistnSoGS\nKBHHvwgmjj+uwEsKr/nGNCD33azxiIYeRodDfjSAjQjZLqkatMh8d5/qFHGy\npi/83+BkSlNX00h+oOxpVAYYmj8f4BhE+mbFHM9rrYi43+fbTJBsNWpOgOUr\nmAATQdUn5xAVvr2vr/Mq4UpUUWijgJVLUj/dBydzODc8J2igs64mBcp7gTq2\nIsBct4IhuacxgEls6tdFiLdnMPcfqnBFZiUBU9taABSGg22pMW0ztl4S6HVd\n7FEgz8Se9iDjXiD2dOkFgSscWIBZe6tFy8EStvLlJa7ArXOr04C5Ox55sB3j\n16jYpBEMFyh4g33KJB73dJTxmXDRKdiwjYHkn+z6fNdBOm1xExAZTl+Dw+BO\nSc0QoyefSmnpwsu3EaJbzkcfTMBqdqNG5j9Hbyn65cjcNHeJd09FPRQ4z7E0\nG/9oTF1MY8RH6F/pTQZ0YkbCEvN04WwF3FHL8hGhWhjZ70eK/P69dLm5xpP6\nTLOR\r\n=EaHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE73E21xCX+EK85llpBG+r2vVVe0lZPwD7PlcrPZAy11AiAijDDBvYrQDfMK1qCEDrNMFAwJB6zy5uTZWEGLauUyHg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.7.0_1566941025395_0.03865984737377515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-checkbox","version":"0.7.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-ripple":"^0.7.1"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-NQuxruLo5ysEwAAIvRgO100VYN8lqsvIggoM/emi6cYF5SPFBZTousGsJV8xtrq5CSW2qUG5TLxaZR8bG6YIyg==","shasum":"cf0f1a71da94fde6ae9d29791438262dc569c4f3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.7.1.tgz","fileCount":16,"unpackedSize":78213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezgCRA9TVsSAnZWagAAEdsP/1q5LJCyYKraZr2e1Hso\naBMg82jWwZDnukLoxtgjDUcMp54/set5Ang4cUu8UFnRNFBhKNWm08pgFb0a\nRGOGgXuoDAs2qNEDrWDVTaAPUHnJsD6gTurLLsyXi1rcHr4H1pvLCdpy7zJu\nyq9h70R2zYrjajjdiGFc4S6xxuDsryEhXOIswj5Pq/DpZ5iSCdOlbo0cPQnX\nBCISFLMcnhngeiKWUSkC8oVoyR3lIEt0owyCqiIrxakEnMJScLk9HRk55/Yl\nWPvfYbq9Rs05bcMQgQZUcI7M4tYHkXBnqsbdS3MkR3w/U6Mk9n64r98aXc32\nShEp70AqsDvW4XUO5PXt3e0TN5q3/3lclYYIYNln/cSaPJS5AoZWVmpmc/Iw\nb5e92KHyD9v/G7Lv3pu4jCZwzd5HuoPa/1++tWrADEsDeatc+1hWW2VwVA2C\ndDuobo/o/AFvrT06KBqd8WWlnA2N7fqxQ+EIxLWwX5JJH4vGWU5txMXDd6A5\nFGh6IEHmimo53ZtaENbO+3wp5MtJt3yJkS3cQDNL6ug9qUp0yq72vIyrDnwD\nCASTJJFi90wN0Wb8qZ6XRpofKFwZLZVgvTRdbtxhmKCebCrCdZDB2mnhcAyv\nXsyCQi4GaCZB6CEfcrrUu5qkQ33TPK5uWGYQ/QDokKtOxiq6Q3FHlpCxkx3X\n49rj\r\n=f75r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvOC+P9L7/Meo5Zghhx/lP1dpxRKahlD061btW50BM6AiAVBMKMVjRlyDkPL/GvwgcsYjuXRm9gYvlP+2aq7jfPkw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.7.1_1566960863563_0.537650132116499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-checkbox","version":"0.8.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^3.0.0","@material/mwc-base":"^0.8.0","@material/mwc-ripple":"^0.8.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-5qRfoON6FttQoAeTrzI00ODlO+k8dTAREKtZs4cpP3eM0KQqajS4ZaOJhtIa/ew/8XKoEShoSgRaEEtFbR91Fw==","shasum":"83105189c6fccca69e2342c27540bc23d910a15c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.8.0.tgz","fileCount":16,"unpackedSize":77170,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+fCRA9TVsSAnZWagAA7q8QAIQ0IBU0IPPC1oEeCNA3\nwl4kDLF0jGRE8AFvClCNmgsPFUSR2s0fBF3kEYIn7RSdPlUdxSHHZ9N8BtfK\nm7nQc87jTKswvc2EmCvt+dYHQ/lgnyPVJya9Cu4VOflf8AHwOnwtsikWuHdt\naC8IySM8GgOMr5McFwGJK8A1mKT2IKMkHnnrOeD/OVUip+Ta8QaVBkJwWqyF\nSPu86sRXB2IFVHjYmoB3nxGd/nq3mEbABzz6ISOOZ0yXavb7esn1uEXjGpBO\nJz8ox2bhpi4AUpbyleTvPNGUk4NfyVTbXrs9Hd3QR2K32ND1+a4Y36TtxorV\nayyih+Vbjj26TDb94LItmRvD8k5RnsHLlwDrL4rXLpalKwknSfSQqnHAbfKQ\nRAgb5A49it6/VtuX7SA6FEG15WIqyR3dT8gICtl48djDMjMOrUdr7/s4TNcH\nXdf74pCQd25ZMmcSwKOrlZ1ES8hMgyxhT70BmiqIylI7uDcZR0yy6SGLGN8c\n7TyPEsSS8T8/u7YsDqvg4EvFYde9eCx/o9Mho/YcWUJ6OaFiPPcXpZPUgD6G\naaXjeKltgF4Q7WjWoTt0CkZIEBcnTvEMZsHO7R2VOVQSTQ7YVPYjprz4CqSq\nPE4Q78Vy9SoGPRtQsLUUyO2Xi5r9P4zWd7N8TuZ9M3k4NUbmNNWxm56KfI2v\nSkXx\r\n=WGbA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIChEY0+FHSjG+rh4v6Yn6H53t1IMZ/wVsL8YbRGsdeGtAiEA49nrsOClrM+Jn4eNObqooXo4OnA2CiCVGSwofT0rvfk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.8.0_1567555487036_0.9266091087269159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-checkbox","version":"0.9.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"^3.0.0","@material/mwc-base":"^0.9.0","@material/mwc-ripple":"^0.9.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-vN9xIcwt9tvX5AGGVcz0jj7CrbD9o8VME4JVs4wKVaQBZjPuvxH2icGaEkLKtYw2h7xgJN2e9iczNc4BsNNQzg==","shasum":"d419f459b11b6233fb982f541b08b4e960d047e1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.9.0.tgz","fileCount":16,"unpackedSize":77136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWePCRA9TVsSAnZWagAAot4P/3L24IL2ghz+2gHFu3SI\nVmnzizVaKbd4IKc/U+mGUG4Exkhm9dLtgJYhlYEl2/W0y3plxyQYQVW69xiJ\nmb9ULilB45ayCOcRwn9h67zFX3s9V6J6/h/vtRF8YEBF9b1BSkMVuZ0HHcWe\nxzFjVz1ZG8Q9d0BEaCbCGfQp9HT3jUMMsKQJaX2GiHbzF8Ae8G1p+StVbd4b\nFrO0222d8O2uSMO9B1ZQGCb0WFugw6y9FEMo6g47W8ZUOvzX8O+YK9fhcHF0\nlZrk/ADObwBNqv7187I26vDu0E5N9dq8zVK3J6c5iJRSDQQ7mXVLENINUq2n\n8wdsvGR6lktmmOu1mndPpqa7jcXaf9MuTavzqjVnY56Wcd6XFJooFdl2dFoa\npkuIrntX+VpGLZZXlct1c3hgiwHLZsESuZ4WX0Yyb0WjAt9bLQh6bXDIPrbA\nUG1Jpu2pQdhPrBaJZCcGg9iEpkb1FRZmH9J/0peH/5NBHt/94F0Ut8GQ2u9+\nkLL0P0QLEbRdXjiOKeaZw2b/UXAtq405Fm26BUVxjEWd/+JQtzGodlGPJDQH\nXwgReEttdmNjDKEua71kBQcrYZogsWS2TUOSOJMXW16YYLwutHZPWzui9AwJ\naQeO3ZNIXUW/EaHJMLDiXoSbNqX0PYS3cvPFWojPG5lFf1HpBn0zL5AZpS+u\n9WYg\r\n=UHFZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDANw391aHRGgQiiAZEQlrN4w19nlr4K5IDHMwhHKb5oAIhAKJsD5fUSB8WaiA4msoF42YmnEG1iJ43prroOwB8I7IS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.9.0_1569548175438_0.07104734516306332"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-checkbox","version":"0.9.1","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","@material/mwc-ripple":"^0.9.1","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-rt+TNHWtOw2Tnj6iewq1HXkMGAwN8lWpDdlgmHPhWX1ZGkSzUMtMIYVgx6fme3YFN5X4+Hov1gOkLxWcEflRJw==","shasum":"24eda9f9c3b2ff2300d19fce76c067b58d16a824","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.9.1.tgz","fileCount":16,"unpackedSize":80463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4FCRA9TVsSAnZWagAAlDUP/AqsrhSWgQUA/m7rDuyR\no5lZ7qYAC+T4AO94nnHO+nq+rtGYHbUcDXSVFUDALGp9OpBUm6x8uPUws9go\nt9QTTjFTzV/UOFlYx/glB08QWImny7NIt6ejVJ5ksbDIG76Y1uSzBRcLdVxY\nwIV1kD7vhnSK43NjC5T4kTung4SjktmgyX9XcCxLOmkQTYiemBt4FJVPdCIn\nrUQT4+t2Sx2uCNIMfGiXfwNnr22RRXiiMdxIHID3bpu5wNbzV4X5w78ts+oK\nDUoOS0yPt626rRiL5ybsjHG3g4t4+rpKh1oDYPWyVq03g/Vi8RosTc1JrMWb\n4tLLvCcSA8/lG30LL+Cz2hwygf2S/Rw37eQuJKUdTVcMSJAMKRYgnUwLeGrt\nZtutTEYNAz0V3m17Jv0jfmiYvIokn75vW+TiWEYrGTv5c09mZyCGlHiR4bzZ\nOi+A/JeNosMLiDRzbHOV6xTDfDPJudy7xWfIwUNZPj3EaXLBl/qMnEkLY9Tp\n19fmZGzOHmDhTJVpv/LcRqTvgduC+d0bn9W0mv0bIQOjYn/Qw+BaZwZA97yU\nxCDi24tpbxxp1hDoXj84djDvIyMt8CpgZNkcr3pkdYz8Hbajhq2u5gjwRNpy\nsF5PdMpHWMB1stdKSNv5cO9ZPsVjTLGIZCF/UyYHRK/9Eq17Dr2F9CrnkFTk\nuHZ5\r\n=Oahy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTOIek9V1aRYoopzJmfmKLmYi2jh9sDYJdnTcL7WZ6VAiEAw2I1+g7wl6q+SFQNLAN93SinYMdVmrz6SJcUCRDdiXs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.9.1_1569877509015_0.3190658627059071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-checkbox","version":"0.10.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","@material/mwc-ripple":"^0.10.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-InaKWCruNt0laW+y0ZeYTncJnRMDnoSaOoPBZndeXFGGLRtlgxBgqhStsFnAu82TvGsT8kzak86KMvYpQ63aSw==","shasum":"95323b3acb8018915caf1204f4d9cfa72effad19","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.10.0.tgz","fileCount":16,"unpackedSize":80458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAUCRA9TVsSAnZWagAAGz4P/2QD7mK55r5SLivJGOzc\nREWw1EzbLA0cAJu4Bjua0hb/LtcmfO4YWK0uud5SXS631xOFGi9Hi4UuKtDf\nnNssdV/RFdQMCivIAZc6dp2pbAtmKc8yOyyF1aLX3/XJ4gqANjHX20BYx83D\n+bPMzyCIERJVCpL+BdhhvAZ9XwZDZ0bbNJ12D29enu1Puve0nEob6c/Hjgwo\ncbqfS4/036IWPW49nC6Vh+hSo608kSr2oMezCDnLWTCnuXIxXi/WY1HjAFBL\nSTJmBb/6ZMsiEyFl9Rrvyv8tBGhVbO/7gG5Kg1A4NqAL49tsNRRpKvlblEq8\ns5OH/Yg9Dm6FpAcJTwP4AMbmAcOSX3AfoCvMsuG94VmYGL1DbAoG+XAUdisz\n4YIXWPylXSn7eJ1I00Gpo6aHoijY7WEPJpW5F/kfggigTsYwX/1R425DswK7\nHpzl3xs+Z3k/Tsgv9CudKPJ0C9opOPN+dGwxQpaL33AYJswPLTOadXPR3yVZ\n91tJj79xtQuLLYD/4jNBU61+9segY1oImucnQO/7Ku7kB+DC1I6dYE9L2Tde\n969pJhvxOTHkFYX792t4lEV+EknM4QjlFnYYuR3FwbhgRvPNT9ok2GVFYuzs\nL6MkmaJ+1o4RJNd6ddfgiu5BkBLfVcTHcHxngosHIg/tjQNx183ZGnSiw3m+\nzpXX\r\n=sGrD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhnz59R/pU9UnGVrcb4BGo6heBgtg0fY0LGylXbck6DAiAbWUbfbU9ICX4Orea22jUYZa+mgyJ631jdo+PzbkyChA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.10.0_1570836499807_0.5273450429129911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-checkbox","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","@material/mwc-ripple":"^0.11.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-rS+wEAjdYvO+zmomVrR+M47PbSqzOCHA8i/42pR87OWgbqogLBdqQJf9T+tY7/FNC48dW7rpFG26tpJjN/v00A==","shasum":"bc18f2fdbd57ab7a8c1390fbc54587030cf7565f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.11.0.tgz","fileCount":16,"unpackedSize":83508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3vCRA9TVsSAnZWagAAAkEP/2IuIV7QMq9OoJBGhE63\nX/bI4RUyvAp9SnlaIlimdcPMn9dVf58sOTrDkJ6YaQD9P/oEYGS/oChlho5a\ndpP5487hhHNZIj84gS3b66djy1+RFukrZ3iZzCoK0qri9RVQCk++tmml5Mdp\npLbma+rUFFe6qxJC1Y2A6cMtgUT6a6Qowa5YWNydHZGcZweCHrTZTYwgrjQ2\nJIje9SWFWIzdOdAHKbgOU9CE1m9PCBRlnoNoO3VXS7dkRJMpsxg1ajuqd8dI\n6yampawC55spME70uP9D8ih9ZHNDo/NMlJ2By8vEBf6l0bC51jvLuAxNXdwk\nAXPN2zodO0JUo6qeL2wHNx5aJURd18/zCvZuKy5TvFshv0CuZE2hGGp9aE5J\n4iAkofoBP9uOTinmYO+O7f87y8gdDTckbrJPMyUhMe7TDNtS1w++NB0K45z/\n2OreNgrZk/4eOlRzqFQBhSr2r4AC6E9mEy0OxEvyqBvceJZAdtum7LJIueHI\nnOCGVHpgr4IHt8qwpj0TrdWcrP7VaQBGBvf4TCwp5PZhIsTYOCRYq5Q3msVu\nRXe0CoAVdW9NUV2NAnGgPq9m55uz9eH5MhBvZxnXZ7y7w8Brht0gmb5oPtvn\nPzH+ys4dYPh7On49wCfc//vVWGNYGpsaBbXgB7Q6f2ixcSYpBSzflJN6R7lC\nqqNP\r\n=GUcC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGy7IhoMn1c6duYRFjSJ1K2dFIOLU9Q9vVKyUa8I0XxIAiEAtfNujPB02iVxhlSV3Uktlhzs3IaCRGam3posS0GXS7A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.11.0_1574804974048_0.9880096506977349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-checkbox","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","@material/mwc-ripple":"^0.11.1","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-UInYgz7fzr03tj3u1ba284v/z/3TgjMwF5zd7gzp2eaosJ+8AehHVq7nHnYNGp45luGeiMeaHeAjFEmjNovEEA==","shasum":"c6d6adba0dbe63d9c689ab3ff4c29e89cf93676d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.11.1.tgz","fileCount":16,"unpackedSize":83508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLECRA9TVsSAnZWagAAxAwQAJ9MIHE2sdxVbdJiwTKX\nLySceseOmARB6uSstBsHWfcINBiFjplhACHNhLh1XnQf5YKxDBFsOxlNgUeQ\n8tt7f/ackGD/Z9+Gog+rA5CY2aZcZxpXnTswYk1cOPqDkIlSKLMhVuxKtzh6\nKSfm3qOdUf7RgNOoL6WYgmBgVB8txEh1DeLe6f3kaHQBTdywWCvia1vJ5meo\nPzXEd+xYzAhDf5DkHHA1BAeajoLOT26ioLfG1uTdlug73dZvUdDqOEfNAozy\nW2J8GE6sHCTUkytvuS4482TUaz19xoSL6k5F4IAtPYnIjn9kOJp+jQR6Yysa\ntSNbbcn9Oih4TTU3PRgh340qnifeV+a0yvBOp46PdzJNHk+eTS+aOpNL5RDQ\nxz3qwGw9Q3jJOUX5dDGlDSHibt/DEMTAoVmjaTMoSgKnHb2VzGzA2q43kLyw\nBe7L50kUMfqLCHvl1pI1APSvAtvwH1Y9H3td3ftqvowqC2gcen2HPVyB++5N\nXkODq2v+haBaO2onaMLretmcvsHmRyefEX8nNZKaNaNHkdkWZ5JpXjjNFaTD\nPJDyt/u6LNz4OxNv2mBMgA5XTb/VKMGJmOtt/pWQ2l+/83xvHsh0wRhRit+h\nOhhgdlCDKB83ZJf8mAPk51TDYoL1Qx1bKKWGUkq0Aa4/thuo0vgw1zjEsaWQ\n9Rw7\r\n=zKGg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8g7MjYZMKxIlnnGPjwvu4TLwEv6X5Y/aydROpC6wJbAiBOedVgB1c9fvvXdxD7bF8A+LvnpCs/FK5lgsc8YMytTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.11.1_1574814403723_0.7167257648454342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-checkbox","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","@material/mwc-ripple":"^0.12.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-7fAA5qI+dvFk/e5FZqIu4IS8RzgTq5JQQLM6YwSzihuMajamWTph7aTaHcO2PFxfwr9ES/RAnLZsva1/MCIdVQ==","shasum":"ff5f3a975743890906b61424c9e80d49cac4444e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.12.0.tgz","fileCount":16,"unpackedSize":92945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkrCRA9TVsSAnZWagAAozwP/ivbOwzlbfv9E5Otr+KP\nN6nreNyfjFzj2wdvhd0HPOzU4YreTKAzWLpOpLK1BFce1nNqLd20toedVoSV\nF6gVn5ELf+f7MXwX5mInIyygi0hnmDHSDTtfGkTaZNbfWL8meyFrVNTqrnSa\nKcAidCpagkGfu0s16ofAy69zhl0IehJl8ahR/eFSgF7T2CmNEp+m0bckyszY\ngZxC1087/XKWXbEWEv2svMDa4GB3G/BzyignW/qMyi0T2akTGvUeX/g3MHhp\nVYIATidClbuiT6pttHpDrPqu7J14YDY0DxZuA+SDfGAMuT7idYE4+Wi2CX7F\nsvLZGDOE5sc5HNxzc1hpvS16VqgnMrn48V8GdwiP9wrxk768EHBb7KqZP9Jt\niF1MdBcsA68wR9lD7OJR3US//FVBHIH7WpLZXP4/MOuijbUXmkCIPx2VeYb2\n11bfV3EZN9EwKE2KvETYsBxEVqH95LCREg1PGwzYNt+d+BceIoNzuNdrpH6m\n+ijqsJ8kcxp1MI5jFekzikH5q7iFH7WiZo2zGLtOED1BsuxPDWHybxN3MmvJ\nVkHUrEAyxfbOYg26pYfUY4tRMbZ/h79t/4K0e7t2P3yMq1TeNihNJPM8yfU9\nhcsg+eYY6BatME/zdjhJBKC9y4lj2kjKl+Y2btCAgxlPxY/5Hx9GbOXJg3jf\niqYD\r\n=torx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFG5jEJ4iIJkrNmbhrmbvSXYJ+sHyqhxitJjEDJ2dP8UAiEAvvEyWYPNKH6JauMVRWQW3tn+BbfeHyY4OB+zidL1VU0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.12.0_1576626474750_0.7630707722674173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-checkbox","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/mwc-ripple":"^0.13.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-HCtTBos/iQqmukkNJggM4WWWmsZ4z4nm8VVNu+VxfMX0KYivIMfml6SZZZR/kT7MutRRn+E7TiROPV9aFIQvSA==","shasum":"45d63a8ee23664955267eb0bd8e9369e0f1d20f0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.13.0.tgz","fileCount":16,"unpackedSize":93872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPctCRA9TVsSAnZWagAAYiYP/29YNtIVJUOykoTtZ9bF\niUJnSvbmvJ5jKaVC426l7sXFNob23dtnwkFRknLVEJgTULY3QDIPVCZaMpuz\nfNA6axNmNm3XegA8OQIgcfP3I7hzqv0AFe/vnyrFrjnr0KXQ166v8skb30GK\nFJiqm/w0I24L3WSDcShhbLAEHYUfHlOALlrY3dpUFx8h9J79IgWlWGmJnMak\nxjpk4ixTbIrXGjcgFEnZnqHSUyB72l3iOZ0ReFyCIwR1v5GPT1K86tGlJPqv\n8R0hGzGJ+V3AAzKAGVvr/FfOxaC/Gdj9PQP+zi62i1ithEMCBsPJUmxkJo0o\nFSpxX7rQos4CFtIfkXcCU5r1mm+zLtYJpdc2c6uKIyzADyWu7iVKELEUXcyJ\nRc1r3klikPiE7V7v2LwnTHPD+0Yay8KD+Ml/dVcgwd64j/Shmqka+DKg/diY\nqXFi6oZilzUrwoCs/7569ut7CNddS4SgIdHpLwgukEcsMwVLOKaqn4u7FlnE\nOzniVIfy8FdzVBdYrPk9kizhbH8C7zjfIKVT3wrCudQMgRe0D17tIjCyN5/H\nzLOX2eDgO6957K4rJr826Tb3RmFzQrLR+rXA/u2abMYgPzX8XkyiXlt+EYpd\nAQJ7a2O9TCYlKLmFWVhhqO4RbP85l5jSvsqTkQAdOLgPv5lVFWRLimziFTWJ\nChLu\r\n=V0KF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQAIdwI5iTTR4aQjLInlkpzxpoQL1tnN2VPwnQE7RZVAiEArvc2MqG6IY4YnUXUcZ4AZbjwvQFA9v2lQMuhgaR0ei0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.13.0_1580791596918_0.26229095720646156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-ripple":"0.14.0-canary.f790f713.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-S/w0Fa4iNNcyq9WGsjBAGGl2u/3ceZd9fqJjyGC7FqFcc5iPIXsLSiKzso467PwRUpks8IUZfxIBlFgSzlwVVQ==","shasum":"2de2b61e5ec33a13affc7bc17b9f655a1470e67d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":93924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrGCRA9TVsSAnZWagAAs8IQAIp0YoVDU1lPEwI4fFql\nQzZO5w6fB+x04gudl9MpBNayoys/k8eSoxyYb4/QmeCETPBEVKPUnDz57NZf\noN8dPIfIE6J4/m/pea07+GiMsuj4JEGj0bm0TvUZ91TXs54L3JhCyKcd4qhj\noA/ttNO4eF9O72LgeAXHZDwA+xt1L8VnNi/YgaSrLBfu1z7LXSfe399pHOVm\nYN3+NL9OChoUE5ntMyuL1AUzu781jf6sVPEGyjtSZBKSGGFjlxV5nKrfmSR/\nmMaw+IplW71C0EWMr8rQwkwdVo8uy43dEA2UFKZRoqPFViDotjmmhRHACb+n\nMFCqcIzDvbQOU9fvkDfuTU5Tm90ziogtus7aKtN0q8/q4bvoyqcHqN9v0k+C\nVU8hVWQvMic4Ekfl9L+oNEmtle/1sExRv3H4n6xDzG+wdVZSnRfwsG3KNAcZ\nPMauWhGtrw5Gak0Yx/JBTUJjBbdXg9usgaiatmAp8ODUDAX7yM9F+loq5bmq\nBMuwdUcjILfFTDstxQayKlzPJs4dxLLQeyX8yBi5Ypv98QdkDyTFjS1mIt2N\ncJTLKh++/+lkXIaR8cKvYIa0tlztYKLV4vW/nRC250J0GS1hLr8K+FfXr6+z\n6nYKPidgsg+aWmwP30j7rTGz2dZUN81klwHd/L95KM/ZIe7SbSviq1I1Ach/\ntIT1\r\n=/Icg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLs0dmVuue9RIlkwB7kZrohSW/qzdnTqnSeNy4qQrG8AiAE/nrwTGvJja4uNanm3Xe+bV00ZBkUPXzkbkgT/B6n5w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.f790f713.0_1582856902444_0.45068245443570354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-ripple":"0.14.0-canary.c759cfbc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UnIQelZ5l4+Ov6Ari9qijzSmty9VyGPY7s/WpRtcffn2IBHsvaW5Db0iSxLuRHlfSlJFUGnpSYD1IIrV1GXnzw==","shasum":"91756fddd297f8f4eca43dfbd0c2b67019cf77f9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":93924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqsCRA9TVsSAnZWagAA6m4P/RGBVy6wPEg1cGTXuJX6\n6t3XGdQiO8ay6cndEOEOK/xuCh0ExZkb19woaml/QPXXCaY8ofMwuUg/LczT\njyws1fcAtLtqTm8jfn+oW0Vo5OR9MgZ3ZKd69jAv8Uc0FsytY8C2971CRRYl\n9wPkqRy/TbE3DTd34rzQHWbzzeogUZMXSKW+MfGL7sY4hHDM2UYBCbtrBL0R\nWJIxqI2qX2m89JCR9mef0Mr7gJJyhqgyyhcM7Q5pWwuWHpGx9hxYJgCn/zDJ\n8dS/3gppZXnX/x/EVnvrp2J8X1MJ329bVzKcmUvSadEWvTsc2CJi/31xeM28\nB5/Y+U6hq7hkt+PfV+d0359uL9XhlUMUG2kD0721vQ7YxbdTzzOISYAyzYQ5\ndNkvIiJid3Wh+0b4UIHGp6kMlNBhaWOPZFhkdddFm6pki//2nv0LBZDeQCZc\n5/D1l5LeEynuhn2azrD/Gt2efMSJhnYIGsbceA5HVmkb2imT+vqbwE5XYaZj\nEVzX6iQWEv0NaXU0qlUq7vRbh3p1DYklOT2UScsHMYcGUf3nUch6AT9dLkX8\nA9gvsNOfZfifoqqAmhPszxdRTxh4sp2GGjbSS7r7m49u7XFDbizqeoWpWSLr\n7seFaTifE/GDsvp93OL0fJJVLAQaXBD/cRatU0Kg+XGSaiETI91oD/99xG7f\nlqTw\r\n=tMjY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWdlCCpImeFLv+H5hoHOn2C+KI7/khoIC5WjRJ+rkXTgIgE+Md0kVWxOIZP4uR7uMFnhj9AC/HUhBuicU3sB8WQHA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.c759cfbc.0_1582934700030_0.12417443222866553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-ripple":"0.14.0-canary.97ef53d8.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8k2/SCu9Dv0rBL4uyYpD0rUH1fMeV8yqemOOwoedw2V4WJpNF7h3pRgp0O1KubuXSUmllOtkNXClzX+q1CWj/g==","shasum":"13aafee02b4931170c51a9ae2a8a6534e2923362","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":93924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3RCRA9TVsSAnZWagAAUWYP/2dIiblweAtUMot1OtAL\n0eUomDqQZERTH/nrUjm/iYyhhuwJClr2rvd2euMtt5lXdVPwetjOpN7e/1l4\nCPHGS0akXtbdKxc6vLPZp6k9ahofC0K9aLW2ejIjcFWOdrnQhekB+2gwbwsf\nPMxYdMBoELu4YaBjlBeZ6t+zjMcw+O7oGAmnMgfMUOStlqfTHCLT6VYiWb/s\nm6pXYnR54+6/FGJeNb97aLBmOOwFeqhaG1koe4sZwjGKxyiFD2NgM8em0WyZ\nTZ/S5T4aEGaNoRy/4rEEvVr6fyBWTItLt3orqcc1vOmxfYehdZxghr2Fen9R\nKapaWk77nMs6cc6CL7iHawSmgsBs61gpWGfIXjMAXQW3CEbsq7WI9YzVIJO3\n26rNw93Kf+Z8j73mFu7BknRoX4fn0xq6L+JrlQ0bh6SSeImqZVDsJHOxSocD\nRGExbkujksMTif9sg3de69mBFesNI3m5oEAconqfVl+fVQErgcbYaNtnWgGW\nEYu2pApoaR5y62dV0D5MSqEKi8GkW3zribY7EDQtDWs0UsgA/GAMiFeo3bWA\nfGUu1gtSy4qN17zAv7pN6WyFOlfe/zywbwNjx6kahUfpJpoyu9WPwiBz8Cs5\n5hDUMW2yAgk/EoVN5GPIZsJa2P3k/xRk9fYjKoJsI+uedbZBXI1ccsXh+KMC\nCsw9\r\n=cEK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+a90+C0XDZ6EmkGdI3//KS67v5FBbZnV9/T+PZLhK8AiAQoccdefkArrR3jMflqGavbLQv4VELXdrhaAmkVsDcfA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.97ef53d8.0_1582935505336_0.7059191824007964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-ripple":"0.14.0-canary.24f5fa6e.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TXc3kcmNCwqQlPQxdQOh8flKxW27KAMqs0/63MgM2Sd9ca4v8po9AV95eVW9zOgaTkK+4geMrHjiWOBW2elj9w==","shasum":"ac729d5f38ec23d77737244e7cf65f76fe20a9d4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":93924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmgCRA9TVsSAnZWagAAkEgP/R+3OQwZJQ8yI3uUt7k5\n2BVYgR0J2BYtQO5DTHeVGhTsKm5hS57EYh9LnZUqQAGx+t246b6GNDsYigGl\nV1BOllBEtRzDkfC9o8qxdFUJ/LZTaW9FTnGaj2cJsDCvmTnxt1lS6SjoHuuc\n3MvyJsqYH4bL0WiZqgwdEafVEgGvrbHUwgr9cRiFwnNgeTNQGbvsT2rSzkvz\nxZ/Ge+TR0HOCMKuAcTQnBjfqPkhmnJ/baeF3EHXB6Ioo7TuC5JitKPrinJRQ\neJuFWlEE1jRnOQMMxqeynK1Ramd4nWRqaB5tHzQ2o7DbszIwWzU+I8Cta3Qk\nnwHq8sr6limeQTCddOUhu6GOs7nGXo2qUhXUBF1eXFpFlk0eIBhpCEp+d5VF\nZhDwTcRWFkgEPcFv9U0wuiaMS8UXFc6ARGUZo4iwi9UzVaFJz6cK3va6MZlR\n/qM7dlDkO0yuTILMQSJXkIn4U3QaLR7mjTZJ87NE+EzSUHAFTKM+8E5cE9ro\nBrdrN7lcieHnsmWKsRiAsgCzMVEKkpgylrYSloE1qiBvxs0D0sAWT0KVBxu1\nLJ9vnfoXJ0YTcl8zQ4OMv5H6bYxwEamU94SmkGZV6m09R6SpYHNCsKvgSKOP\nrpYXlDOo7TeeujHsfiZaRw/MpuncQc8yAW26yJJ3bD/gKgZrZHPmW8rL+0En\nH2ko\r\n=kvLd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfAc+h4Qc3kOtQDNQtkzBHKZW+m5wopGkLvJ275e7DjAiEAoewihcEVACUEQ5lrzFJOxQQxzAJeIGCYV8x3Kh7Wads="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.24f5fa6e.0_1582938527937_0.13233057397505887"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-ripple":"0.14.0-canary.960e214f.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Grn+1xTRG2qfYu+O7TCq11lPTaxHiwPUlG9dUftKQudFPr8O99j5o3i9DSIRKvlSaC6EMvSoZt5sF3cLQeDhLg==","shasum":"00b6a4c48118e694b7147aba8e3f2e2c82d32a6a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":93924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXVCRA9TVsSAnZWagAALygP/ihDvRrtG5DDqM+jEFoD\nz5lDhoVvZM5aSONo6Abd9L6cAeNuQGPesOTrlWd4JVEObhJgM7QZkOz17Y5c\nvwvSiFN9Z2V+RO+SX2OGrNseBAfPcp+Ls63v+lizwRncCLuNTe+oscmbAWia\n5iW3aYNO3HLX3ttvBVMLjit65xOUPC9wAdITuRQAvz6YVtOl6trOWolVUa3O\nsgX9bzeecgYD5yQJLvL+UYWp+Mfj0mfUA15Ct+799QEWUfJvLVmyljmIn9nI\nWeV0o61otebWutzs9V0n5yJ2B54xntCZShsOkDbh8rUErOMcshv2ynvmBvsk\nEmsaEayz81rwClYpel5SmcZFZM0j9aIOXgbN17wC5XU2E5m+e24Yaw5PL0Tx\njHCgYUUdxiKirN7kIplXQZ54z0OYCjlN+Y5W1d94XHHEP/ys3CHohXIlArau\nCPuokaEXhgV86U95byDnmeuZHx7oHL1DDeRYQqw5sQJ3LyFfgBAp4olvzPk2\nDzty0w3DJkBc36SdNzvLbAxy2TrBR7jtM7v5VOx/fmpxaAkLtGeM3phH6OPP\n+l8+nfhiyTiDa6LZYuRbjTsmB4C8mxrGP8T1AOpDPZhiRWY1IipbzWryppUR\nt+jBGCaKsJ4dBQshiJGeBz3DmnH4eNZiD/jeQac1oqKmEWOwH3ceQxVUAv/m\nd47V\r\n=O1BR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ5bvoTY4FB+IWvgK0zUPPIl3whLj7MCpzNfKlETql5AIhAJ9pmAhPwPJTveV+b1lMxV1Z7zaYi+OSJFpEGn1Llb9b"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.960e214f.0_1582945749031_0.6542258681740092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-ripple":"0.14.0-canary.a2f046f5.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ofWmDMr+E+QOFoBQtHcZyiYoaX0R8VOSqjYBcWtNCmsyN/tDqHFl7gWCAEVCNS9Z+ZueLsmvD6aJMj3vRgzA3g==","shasum":"e020ccd3e20211fad675cd75f5f533d84ce80b0d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatOCRA9TVsSAnZWagAAJvkP/34RGlBuNp8hI7LEzqE4\npZnk3xQf/4KFJctr617FG1OiIDsmE9pLvOCBSXPa5+2P834pNVmN6dqjx1rB\nEzpFL6wy9btPhB94DX1+Z3An00sovYtNHBm6XWb++Ub1ZjyfuSfVlDJ3svX+\n6Tm8GpaAIFpibJqi6+BEhuvB35NO0fNMwTO09l1Hd9c8wr2/TFVNqxOAY2K1\nxhbDwLIaiitfBlfPgn2JpwnfSD/rsAL37XqzPfK6lhc6iHiZteVtoCVxSmeB\nBQ2p5qv3AV/QF8z0KqbECqN97wgu+BhBUz9e54LvIHkF3PRMyOEIHFTFblFs\ngASkmx9QXDcnehP46RZtZPqfmWK9gvFCXy+HY25pNO+U2dmaRJ4O/8B2YTs9\nKPxghdN/w7OrhPz3koneKU3+IWH7ToGmBb2Tko3rPwN08Ms2irH2+psog/k2\nueIqyTUNw5REyv85YgqUNeuHuM+pUSu+Yc6bRSSj6Twrak/anOOrwS6TVRIG\nP0GqswtkbNC8b6QB+TOXb9rkB6fc50OoThCpaujezQj4/3c72Sk5dpctU5OP\noM7/AJ9Pwe42WMZVWrie1gBMzjFOvyOEVKRz2KLOiNZTMmgMeHxXMhB0f48p\nKSoWv+7g3I6xcNdjKTnsu7yW38zhgb3U6cRAODYgRyyH5RfWkaa9YDXTJ2H+\nYHIZ\r\n=P8IF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKuRlJhWcCUiesZ1MMzZxFE5SCoeClj3KlIAnX8mNCuwIhAIL5MGDj6MnUo36IoupIkEOXoYBzEBafjiY6a8eLvEYL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.a2f046f5.0_1583197005647_0.9053165306088864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-ripple":"0.14.0-canary.024f371a.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1vCnYsYM+pWpmPJbAlyC7HFoefTI4e6vTu4x43/WfaFOD1euqg0zhr4lPvWhbUJKbAa3AocArN/0zNuIqRzDLw==","shasum":"e7621948a38e410cad85293a0260496358db9e63","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLdCRA9TVsSAnZWagAAxOkP/0RbD4k8X0dwvNDSuXP0\n7pu21yTY6yGZ3jjVwXP0ZQGqa+2yB9KHVIl7v69vxJSl5UMHOhvfdTIkKd3I\n6pLtTKiOmu9smh71Q07pd2+2DYWS/BpfqsXkPvdkyRqV2NyEaOq6eD0Ep7S2\nXMxg1bkdRzz22DXNsfDqt/dyi0m8jWFG+arA+qmC3dmaGR5fDD7u3WVxdxll\nH5TSxilr96Tve+2PSCcABC621BKFo2FD0cxpwcqb0fQkCAeIPDv5bsXSvGxm\nKyTIA2kr3JQWe/azcdJTkrps0DMUjEhxpciTfe5L17adwjPEauCxVWYw/HUG\nYDlXcUb+RejkRfGMLQWiyNgo1outcK3YmrQM8w/7DJkqnxgMxtB89Fkbkc8r\ngYYrlZiNtfEQtC74eWfy+inmgJ88ZQ+wXd/UFD3br3DNcaAiGK12ZjkG/XVy\nQTFfFr5b3KTMj6jOe0H9aC1Q9iAJWHyeLGKIsCLzJNg0/DUPHCAbAr0UpLDv\nXsOPpg3DQidzQwGffe8v5SjB7ekxZP2V18UqtX1EDWWrNGHEapfD4vLrNU6w\nMgc+zRd07XS2Y55axFHdphhNKCPa9/XM5ZXXr286zmv5AY/+wTM7OMLxF5q9\nbRzHkGmlkYhnkGAGLivstoKvTWp1mqAxtCSL2KH+dcdH5gRwROLOBPG8ogS5\nbFCm\r\n=t1c7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH95mEJzOYwkAgNOvp0+xLO9DqeGiXnHLXy55gS6e5gtAiEAkhgJXHeTHOzIyPLL0UI88Rh/rc14f16XLWiwe8tyfEA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.024f371a.0_1583198940894_0.12393536876973044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-ripple":"0.14.0-canary.2f164110.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-D/fU1m6+zG+JntmFrB4/8Sb+NRwMKc4fpR0aQ2/KeknG5MvPG7MGd+49Mt0semCc+7BukLGcfpaUKhsViaHHaQ==","shasum":"158dffefabf8356d4915b6eef2fb4e4512cabda3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1CCRA9TVsSAnZWagAAB2oP/R0mYwRrf85Ot5DsoXb7\nKfhJh6vFbdXB0W+YgmYT7Wk4MblCM67g54yXKeAzeI6IZm5wpL48pzAtkPMW\nCTgVYMPvdG2ZOK3rTR7i6N+DI1ObaJb4eErthi/3XreW+nPbTrj5RKHKNFsi\nZ6TxdsPKcXQJ+aVySWtB6UGpvDPqgIe4QXgD9U+I3ycTwI3Rd/FrQ5mn9Zh5\nq1M20DUx7JD5h+D9ZheLe0/gVqPATkQKh91rRU0KhZEU8dgPhPyNK/MP15K7\nbPehmcEYEihE1jmRp5J8H6ySCF5gyipw6YmDO+hc5X5vHbvOztDRpgEyQK1O\nTgl70sGInvfLvbIfd0ZlNrjgDKsEqcrYodAKjphzwREo2bUPnAP7xh/RGhTJ\nwm4zchULvsBjCScNXTt/ilqEuNDqfu7XzEmaYpvvwmJ6J1Adrp6QTq8Hpb9t\n0wkbw/FCyMpeqUOQp64vh/8r/b62Ct9IRFYsddb6+9NTu5Q70KpMAt2dzlyd\nk9wi+HDnmswEIM5gfY7RybfsSwnkt4wr8SyWzoRBTM/2dqrUrXI4sD4tEhVc\n7ExBcHdSZWc8Jk8ABvT4stN0LTU/UaRK8NC5b0vuqBypG2GX47oNsgEh29IB\nS1+qQg8Gn4oXQXdayrwGSmD67PZlfLuKGWp1vinx8NXOM4oZsHEycniTitx4\nq613\r\n=wbkK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCW09PyXIFjIYHytDc9snqiwFPV/8jRo9kDuSPp1qdn+AIge5QvTJrg2x6v63i72LCrju0/laag8pHvN+yPwg+qhzc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.2f164110.0_1583271234145_0.8908449424339195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-ripple":"0.14.0-canary.edd465cd.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ch3QlLEBvdF7Wunl20R8lmCzrDO+O+RFyaNssjrjrjarnaAoindwRfyyXE86vpaCUkXHvrtbiDbkPU0g19As8A==","shasum":"907cdcea8bc3c291cadec510f2add751226b584d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIJCRA9TVsSAnZWagAAbD8P/1WiOHSISA8gUn9kO5zk\npcz8eYAlrzc6x6hdAnvUiUcp1mtyQ04PtJz5wy9d58w8ATyM/OjOKFu9axUS\n0dt7cQd/q2WJbr9R7vvsOQNfGwlbW++ysRLWY+v6CZzikZhpI/sPEUF3dtvM\nIOn4C4KRKN3BTir623pLo+AIGfXiiRpCDTe3SRUNbd4rqkEmV7Ur9v43RiwB\nnpYRgzI4nHvpRteZfeq/y5iD81MFiyiftWDqU9VRAZ1GEb05l2caJtGQlMOv\nsYfRnfa1wpyW6BmYIAzD00I9sQ0hV0Nt2V2SuoqEqq1509LzM4dZ5ygssJul\nk5TfP83K6fy/jAg2OHS9G09VGyHmhzx6lPjdnEwwevyZAec+uPpbWJDVmyA1\nuMH9ll42L1CNKacKy7UAMEXjedqbNToYpHmt9+UDAvDeYZDelBlBydz1sucZ\nVg9NcnRlD9El2QS8t9TShiEmsMz5rWSFd8DNqmE9znXUqE942SEk9Y5FEPB4\nemX7gngpn3OYddXdu7Qc9Y3/d+ugb9qNqOEF/eFf4wfygDQGURwSfgB09Gs1\nav05/GEvkfmTlxOgMzU04G6jxbAUGZLtDdFX/+G/Tj1ZdichqwnI/uA+upcP\ncVf9e47lfzOEbLUP+cAPmaI0bBIf3afD9ESl1rcXXprwXKg7USPliUeqq6tJ\nKdNk\r\n=aZpk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGP/6A1sNu/cUu8y2tw1LG7Md/VJdxzWBOF76MAB6dBFAiEApjfbmE7scVsp/GTLlWOK5S3ppMU1ElGgbWQwCPB7+DQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.edd465cd.0_1583280648911_0.4020219398301099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-ripple":"0.14.0-canary.2b02d017.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ca88RKUiHSQhOhCutukq2bjh04mBr+OhirKUJS0p7EtWZzl6HkjqVsDhXzBIRdf6ja1rApCJFjW9PobyJaX4Ng==","shasum":"8de4a4bde5a7957a790cbc3a109b1fb1eeea1396","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1DCRA9TVsSAnZWagAAvOAQAKMnRQ+wp/+QddHORpAc\nt/mh6iELjfKvCyI13XtiHmuTjivY/jFIihmf6G4znZZicmrFSa3kAC6r0vQh\nKJBp57RnackFMGMtNFz+KnEcjaj2ygN/gmOTjSna750WX9VbG+l3LUpV0M7Q\n4pJXFWHcyVgHT+obIh2iPxND8Yr0QaNnB9ztAcRqV5P3Eim2AtDOvkdprfwd\npb6eyHVSHUkAex8/hsXU96VA39uiacV+WCdTAyU1VzvYEJLhpml4hRuVyjDn\neYmlOF7K0+RpkXElym5mtYKFPNCjiOkiBxjPfTtEyOkrfq23P9PjktA0Yj3k\nWWnfaVOPeVBCznHiLswf17Jf5MCz35oq44bn/eJgZBUFb6EaOFZ8HiJr9yw7\nNP+l9TYgzvotw4ni7iYCZETA6esL7xU+edx6U8CbL6yDQVVHh+IeV5w6U4aF\nA3Pn4zgpETDGBazVWsZ4Da+z0ugWFcXVAyf1FzfRA81zV31MuyVwJH/jmgQq\nmcZgIbN89Yv92+ikxk/CsUH9qdtvLN9Oaiz72rkj50I2CrVNl/u4xJIuVv0N\nuz0iauIQAPzbfiRezPT0Of6U4tcM8UXz3mTpVTVi9HapUGSelfufHBLtuAi8\nwWBwXF20jXTQMUyTDa2eQfv/Ml7FiXRk6bYzLtNGYxQ28e8K2e9ifrKYbCS3\nbN0p\r\n=C1Bi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzjDlSGSAkR8KfiQS95yvVfBRQon4VcWA427t6E6VpGQIgeDwqy2wygFqj6J1/Exv0SxRJXF4tTcn8ag96XK5ounU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.2b02d017.0_1583353155671_0.013941233513668161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-ripple":"0.14.0-canary.cbdfe453.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NX3l7u18YjglV0XSYN+7mG18FsZYt3H8aTk7PoNw2G21WLkvowIFcARm8/R8lX5Y2xkORF3s8ylCtWWfd2O03A==","shasum":"b70a21ef86e0dccfa0873cbda2ad4428c6a330cd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFHCRA9TVsSAnZWagAANZoP/j+TiuaM3JAlxNlzKrrp\nqX7eu0j2ub44TjjGDHPGS4rTv0Wek+jqSN2bWKLC9KZYBkmQhn72c+DiTIOX\nHtM9Sw0uTrjIdIMTEt+lrKJuf/3pAQXSNeyPI70YGzXxlPtXKmobuykzeQF6\nPgsMwxAnuaDI/Iu7qOGWrk5aZEzZE830qwrWnb4eiCLMQmV7eyKAVvgG5orV\njvbVSgGoa6LEGq1kEC5TiwuzTwjTb9liYQgKPXACRZN7CvaBcUpCzk6A1b4L\npELBG9pn+ApoVmBqa7PUqbm6iMa6x5ZkZ6eWH0i/rv6ZQSzuXO/DXkz/MZQu\nHdaxC85Q7XeoHdBC74XQLr1Ef9iQSSqErMd1Fy2TMqrMG8OCkaICtr3MP/9E\nWtdSAHL6wsf7yFZASFDiJt4+5VNZ6v8xqz5mdl7xKUQWnDNrN30kZdJJEyFD\nNrsDgKD9i8m9lkCqKBFQDkDHten0jDgQ8pN4fjY7OnqsYw/iH45lSx3shxvw\nv8MmNyUdoUQca+iLlobr2sVY9O1QynkeJUVLx44A0pIOkJnSXQWDTLRjrBTB\nH8Wvq5l1i5EuO21ynavvY+RXBgURHwUXsDWXM+sENFhecuk5FhG8T7on6OVm\n9T2MSk0LdR5LTYtY91byyjmqDnlUAGBj4vBux3XXfMakmF3HTFLvyK9YgMmF\noIhe\r\n=RlDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsLOIt23lLYXjw/wL8QaKoFfSFatD+mBDsw5Gq1DjJZwIgdDc3dKR4QAgapUUvhjj3ReB4CVJiBXKsxAHiVZeGllU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.cbdfe453.0_1583358278854_0.2496787395511848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-ripple":"0.14.0-canary.02aa8a98.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hMkP1uBiOpFlBvys6XftRwDFgF+UVO38cbI3lqfr03zJrTEW5slqiLeYYCmOeVf/KW8yzdZlnPNqrLdUkh5BYw==","shasum":"9a3e9b9aa886809f2a66cce51359988de41e7778","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRqCRA9TVsSAnZWagAAf0kP/RFJrEAQIbRhEPx0NDMF\nJcca33M7Al+6Sp6FjUEZEePfKoXTbR7x1nDS+cnzK3hMvPl+7nSQLimTvzfY\naeQ/Ayewyo2OIxJzWMj/g3FHTTZHePPCkW82YipSQo7H2cqZO3SSvZxKGN2X\nj0GqtMkumNHowRBO7JJ+dtuFmR0G5vnFLG1obIc4xRzEE6+7bS5+dpGEBY+i\nYiKwvLxl/Gaa1queNScDBHePfM48+a7o9h9g+NXPkQxQx2f1AC/dfI/dLcO5\nFCDdVTWB8jwZx+QwI9usYfp86JNsxWANP/YpDJ2J76QDlGESuAs9KKi7knVw\nz75kEe4sSHAgB1yh6bwdd4DP42PRjVTzXHBeCLdvBbNSWisnnCqEy2mIpW10\n+iPcQJwL8MsQHxzj46dbgHm4sf9jv4OOR5o8jR9XBnMBj2Phdv3bvcWZBjok\n89z0Ghtla5Gm0FIJsKK++x5ohhrlPAe1DVRS6N7s9wO6ldZGR7V55qrhI3FO\nm/RymRwSGi9hCI/dMLJqUSLhp+g+n8wfxnmn+M5izIZ7PhmdZ2OT/Znw1Op4\nkhyjICw6tPVnhVMM2wthAOFZOEu9OGB3SXnSHi7sZ+XV1735SWsLBnM/XnqX\nWwFVUlLyIy1snqLKI+cNZ6P0zZpW41GFqZq5U93lY0YwQyOwbZ+RabeSY/2p\nGrWv\r\n=HI2k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/2L8Yq/ipjYvJ+WDHIYfmwar191fapCu+/6Q0s+I62wIgJZI9U3ghfdgXU91wjwi4FulbJsSuc1ytFUpzorJshTc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.02aa8a98.0_1583535209946_0.9845659100759705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-ripple":"0.14.0-canary.7cd5aad6.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5sp0r+OZ3NLdC9VYxizBknpHpvjylrCOtUuV8bO1Y8pnfNsaZkyTkIcz/41Feuo5G0uvIdHSIS3cwOTq/kOUwg==","shasum":"7139395e1e098034a160b6433ccb3d6cec5de2e5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8vCRA9TVsSAnZWagAAXQwQAJqzDozUi3beOdHuOmOx\nbOqFDm4d1yFu5x8gBB6cdN38JlVWrsIGSVb2rQJ6kBm0iLG/ryf+ZaE69a6O\n46CNQntf+A7V1aQgTaesd8Xcs+/lAoKVJw+ApzM9tDKW+1O5lDGhfYoKnHDg\nZW7wzHbDhnnkFUdKTGNu0o+tHPwKZ0NypyEBVs1+/qHvDP9J7yy5/uY5YjhZ\nmwaE0esvjp5kgfVhMUNDUBW7haRjAw3vrrevlbXACp3TaMFAEBFA/a4pFqAt\nplGa4CE6tozTdBj3n/dZsTkf3jTH0sTCvQiCnjRcsU7IFwCL/t28sQ+1v5gE\ns1MPpsNSd5hqra5iCHysipwa1vzyArhdGNjRT5AeNUKkGwJmgGTKZTUjbYKs\nwzTKX099WLCOY/Tva4lkFp3nzf7s6fd/oR+iyotu5yYrxOUy5RMMQXkcq0ze\nuOrO+PhFEl3MiVwR2AH2CNwkPyR2lwAnN5Gyy/v50vN2tzCAUGo/3Ww1npiE\nWU3HumiCmIG9g+B7QMkOwa2u8NF0k6pWHwwGtY4mtDooC5u2TWvTSc+xEKLE\nckajYbq93cpbQ2ZDRO/+AV0HF3TZcpV/WFGTMab7m98M7hobOX2Ja6O3goSA\nxq8phpueHUdDVlXHyRqIImojZb/txmxs/qIYL6SgXY+iBeceximC/6ykWcVI\n7vC6\r\n=XVIt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrVmDCcZ7f+7C8I4O7pEUens8tk0gh4t3+x0ciXrvk2AIgYdrrg/GYsww2Pzem/boZGrP7Hdnh9xjBUpxpBRiK4o8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.7cd5aad6.0_1583796014840_0.5378122501217348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-ripple":"0.14.0-canary.3a79dfa6.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-v3zb1NdsY7jRwiC1jaueQ/mU7o3wLOtYbUpgQRignP8jzttl7hvcZOazGmlDm+THep/6xHo6uyLH4mshvHMIew==","shasum":"556caa07fdf67cd6404a8593067d74446d31567d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHWCRA9TVsSAnZWagAAPXYP/jpflNIKa8y1bU/LjBzm\nmAS9GAQOMm2AgHR0nf9Tgw2e14wSyc8EHgJIUoyOsbpOQodXR7ulOfjDKmOq\ny2yvg3XVBJtxbilQkR0NWfX5tTERIVLlPfffkNYmRY9fay8HcUkuldNrPgDy\n3yopPFYfaemU4xTvXXwD6qghzd3aRyvpvymCREzLoA2446BknH2OsXOeHiQb\n/LjMbOaW5RsBXM+nu7o4wnIwDZQVUu8sht31jeQ/22/g7/iRf33VTI6D5iew\n03zk7de8CYxZYEkaLfahwf3Ehisc1j2nLvTv0kbpQZHQr5kqwJQbiO8eD4mh\n/Rc4tO6+a+BpdBmPW66+t7L3UsSdIa/kXxF/lD10o4IaefY6PASU/d66IG5m\n/l9fjWDgP8YF3ogQGzfW/kdONdx9AKgZT2uz8L8COL9rFGar+gnR8ud3rle8\n6sEpQ02pIBqyOxVS9BBSuMZFJ+8qg6kGzI+uquSxQiYZF00kH/nGiWk6eav7\nISaCoPtETxQKTA3VO8ybCYz3l+w7PM2AAY2U5V5wIh+g3FyEnLMmMI9SQk6c\n7MfBFcq6o0JdbhpLROCy97zFytagq5hedlh99R4awRhVpmKExE3Jskj++K1i\nckE2/v6upKkkBCz5SMuP69svXqv+tapgtGSjJODlrguSxrewh/6ySvJ2R7Et\nR9l3\r\n=ovvx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrdQY78xCglnlwLi1huYQv2RHfD4Mc6TP6K+kvvt2/3AIgOEkE0/k0iydUxdt238SoCGqvQ316fSTppb/Mfgzak9Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.3a79dfa6.0_1583808982457_0.37771899170006495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-ripple":"0.14.0-canary.22e0f5c9.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DF7TeYcbfrSpSRxeFlQArI8s7iSlOh/pGHKm/41FG1B4BDByXS2K4es+mQD7cEFnS8DMvIZlVmICeEnuHxpU1Q==","shasum":"ca935b7e4a3ce8eda19d7e44f25fd822bf93e6a1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLCCRA9TVsSAnZWagAAjcEP/iYgW8bdj+bRoJasJ9fC\nhwz0PFKkZ1NC4gBBuCpknnH/Uq1Ft3DEROSqD+ENJvHqqLXktp5lgRX5da4k\n0cVsCPd3ak9CVm/oyEpNqqbFEcrVgWYdhj76J9DbscsYsDtQZc+X8h5Y+KSI\nSjh4ojtd2OTNoRNe+LgoEdEmcK/9awaOJmSdEsTzZnx1i45P6qoYo3G74DN1\nnIQkgjbZ9vjSiUxncwWdXv9EwPr+BqdrkZIqPgwNbUMIvk73GY9kWEVcq2eW\nKDTifo3yyYZmydFj+KA0Ws6CFefbrO4/V1GL/+H0lSOXlh8lEMU0fVlo3leo\n6tORkMe6DQCwUtYwYuJY0ttvQ1VJHTTXI/NCfdmSVyANSmBJsztTz1u2Q/Rq\nXviLvpFk8MmZBbciLOvcAQFe86TpUZRTGzdCU/rH+BJx7Yzvs0DHXROIYu2k\nyltQ1blv3sm5akl8kKqpV3+MqmUDKn7qzOhqZ8Ahkf/ei3b4VbIyasRdlu/m\nAzQzEpct7GnZJfR/8lFW5wrmm7YOS6XEmnmD4yaqeYyZT0U+d51DiPEkoo7E\nPS473togQur7rId1uYsD85sXxrf0Va9/kooJG4nde90l8lih1FCiWLmouhhD\n5c1yEXSale2/YV/1xKzGvPW7yHBOE9y44aiQtUPW1hYt7TZ8mZhDaqKyUpSD\niGo8\r\n=HKQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl6hepxa4S/RITIi70xSZ01XDnNxXfvcxPi0qSkdPnxAIgQqCN4N3TiBVypsR4AevzqKT3PxAuD4a0nTYQ2hOYFls="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.22e0f5c9.0_1583809218344_0.8560275655362548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-ripple":"0.14.0-canary.f23a1d1b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nAaKKrfcGC5EkQhZ3cSI4/nhKyIUeTtFizwEPd/RkGPzv+p4ZmMdZ4HJnZ8JOXG0ZUojUh/BCoHzd5GYcSOsqw==","shasum":"1cab79dccbd41972957f0da599143d6bec889841","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8GCRA9TVsSAnZWagAAWgcP/RXmn2LKmrp6skTDhgFz\nluiC3v9Xh0Ed3XzzzWLju5UZSU60MwOK6wM/8TqD9MSfAzJOxWIh2DjWaTSd\nloWHEODub3jvnGeSxrwgllWljNUF8OXrfDnJEyazj2jNzlOjloiHjKNnpNIU\nn7RrI1mUdlEU7AWeDXkneFcX3fMLPlQ/sAq3xye4EHtDHaq+K6rI2P37WK8F\nmpftEMQu4uY7dXlmElIv7yMtHYV2HPxJ28uku+9HtjQaezdq+qvmzWpQqgtn\nyP2nOcY5WDE5uBzN5T15zDLM3jtop/PBbNHQmN5lA26idYf7k2baBzM03Stl\ntE47F7MMGpHYnCyScqsjnVZo8CqM+pgO1P8BVJgMV/V26ap1pe5YsHKpojia\nJBFOuu6jCA98PgegXJppW+arEAZTsvyG8xy9vhtXgQxx6O3iESm/dz6HUas+\nrXeo3qxv49wweKj7wLlEjhbz8r2I94mfJ4uWv+3VexisZBQ3TKrJPc4EE4AL\nu2TCpG+JNkSQRaDxnuTaXjRK5CmasHvzWsgnpisY7ASPYyiSNSPb2VQ321XM\nVUG7a2wVU9qu0LsYZumiltWxgTStsUyzJ3gG25JVRxzYt+7O4GtidFkoBMT8\n4Mem9hsMzU5cCOdt3hf9IAhFbreRgIhd62sfj9U/hFZM0DWRa8Xwv3dC9ZoC\n42IY\r\n=ID7O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRZwOZzvS+Ztf8qAQSP7N4+aaZVKn36a8rkB6ESJ86MQIgRrn5+qu54YEYf7zRlPjx8H9l1wiD+XGiHIuMn3LeaZ4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.f23a1d1b.0_1583873798233_0.03465315761932608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-ripple":"0.14.0-canary.34b2d69a.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AYQDGKsUA2kVQI6bd38vCIwm7h58mTHc0+CAMyeguZVFdVNcJdGU74qmKozevE/vpY8hXXSCHCE4Fxmfn9LFQg==","shasum":"bffb3bc0aba3e7c303b751d4cd4b3b217404a007","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANNCRA9TVsSAnZWagAAB6gP/2nH24dfQSCQArYtI9nX\nkh2NOh8+3NqRWtnY5Fz9MXmToBqEW+kzJVykGx/HPniMiESnX+/JecTCFtYD\nHdm7SqXEiRG9FuJd2rPYqjXv0JgJoonadqPhz4jWQiv0B9u6YYAMSGlfaWLM\nNmQPcvcLdBMOUoRWIaYn24A5VrkZRISfpMkCYdOQUsdsggcYNduAJi69xLdn\nCgLhRP0ZNDmbQgZixxT+L8wTHwUP0hu9SxeUKLT5ot90G/uSH2iaIEwPE+xJ\nlIQQUQSabj+LlJcqyFyygm8Pz+Q4kqE/34iaW+1EN2plAiysFrCjN98gjZKw\nidqZyh+VaTaSsNvu1Rhe8rYZ89EHJ+xcL/BmDusOHc775LHsjvdvzGAMjEoU\nElLJMnmChklw0LGdKfm/G3RAcutcToXEV3KjMBRKOqmoTcLlhjXXahYzHzuU\nvyWjOL0f2CpEXPXzr2t/6MvuJzfX5rlMZo/YJFYxUmbAR1WLkrNGy66tD6g4\nV5t0L8/GgtA1rEGuOpDDXfn6xWLINInDsInwztC7xo1E1xx22/+v9KkZGsmt\n5KX13r/rY4vxUJ7W8r6X13QKJSnJfQYjRQ++jtB1xrOFJQQzxZBKlrVLIz10\nubIjsn+tssfAd/iC+6qwLtPix4uWlGxL4MMb6kvmV6Z/PdBON/YtgQX2qU+9\ndNfz\r\n=NpFZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFuRwfYwUzcjFl/oCk+aMPJd5Yy0KK22ploUPeysdmQkAiBcvXRcQMHHNvAUtwoOVlvaxOAMj/85iNBNoGS64h11YA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.34b2d69a.0_1583874892660_0.8422864265600867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-ripple":"0.14.0-canary.dc04abe1.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-My7ToKzMmxFBCBAnH7JFXpMYkzYXuh2tDWfRqtLt4ei1Zt6uy6P6GAI1YjPqsuQUeC1hzbDY4iObeaPPIzrmEw==","shasum":"b68c7f0920b2e8314c34184f28c08e498162b292","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5uCRA9TVsSAnZWagAAl0kP/i2Wbnw3WzX6BQuWUbDS\nJS+bmibvLZtqeS3V9t4xDY5mHKy0I4bB55iXlz55Ppf6n39z9oV9fSOmBBFS\ndIzuOd+wMbvyop+q0pg5/Uex3tcBhVcoo6jxD2XSgbOldR31iXQx4iT7mVWV\n6+iLQRIOHlJnqa5x82fvtvKmg0EbNCLSrgnAHTaHlDI+NQx+YKQNPqMzvGRL\n4Kubi8txco5w7Z6M8vKjdxhkUXKBnlLIsAY6OJwTvl3wnbT+fSa/HKt8Wfqd\nEh/Ek0dB1kajv+Y4WDUhiAoDAhRCN1l72ezQIJ1G9DQzQ3MOkmEKmx8Jcqz7\nnJ9Ay5E6yR7Wwjiw5D1PPoSqb6Xg9vgY6CE3Q5D4GxkXeCSvr5uS5r9X+oH5\nmwTefpUtBEDgaRvnt04Lu6J8Pk3g/Dw+XvzulixRDsghM0lMY6wLWITgUa8Z\nLVVby24S2oUGJs9qHJl7TyUn/QFkhiv4/DsvYwJLuFRjoFja3F+D6w+MGOjK\nDyRLqLnesZvhI8IjQQ8FOJ7SkfTf16+MOc3AL6KRXF1IlVas4/p0MiHC70KE\nyvx2+79dMiBGFJ2ehpgeXUjczbCe+5wqnFP5p49rU8RXym+5F6DKLjzaisPD\nNlBXY3xWO4JsC7xxfBS6fNY+jf6dgB/nKdjIRe0kQZoWqFN4vHAC2ahIBcwr\nWXJN\r\n=YQwG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFx3yUyqpxohwu/MLWOVH77WE8332WgPH/vbCuuPH3nLAiEAluNgFqSCO9b+knJqigMsmVj5dcHsCG1e+rpJIFsd3B4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.dc04abe1.0_1583877742499_0.14406752959103453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-ripple":"0.14.0-canary.04ccbc88.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Aak2xOJAzzzt8qhaQARWQEQG59uFayoLfcpyrcTcEcDG1qK/ATFmqFLe32xo/L7qnhqaC2RdKLfFC4wbfyniLA==","shasum":"a5a7a74d43ecd865d3f0b1d806891fb9e254c6bb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDI1CRA9TVsSAnZWagAAJ/IP/RgfopFqkqm9h94keV1F\n3ThFnF8ZWV2gd3X/mOJ+QkGZVeJWOk5iQqKQRLhXpzJAEAgAGVi3UaJuU8G2\nC2zazw54Qs1tXB0P5M+TJN2lmpO2cfZImMnRBZ+T6XnGSLJNyYhFc6xKIXNd\nQ+8tHt8Fo9XKfLg4MP2kxBUkJo/lDUTfRa2V51hia21So24d2zY9UZHSE0jB\nux+6ObYg01mL1QLX1QULrK4SflBL3qxklOx7y59WtbXwqasjf9Ypc/T5vuwi\n9nrZ7lvQ4eFDpqcIYTVsGug5kYoWHWhS6BvROVPAkxd8ypqPsOFjUnoyvktP\nH3OKaUi/clCfBB7970uiXjy0uKmKEIqs+ZMncvAnG0V/uCK/avHbkJqdSScO\ny/vX2cFvkcZTVmc5pyeq7AiZm4z1jCXne5AEhm9cD3s5t8HoIRsyL2g4FuHK\n9kVq1BVwzfo4LyihT3mZUOFhpy88Q1o+SBfZzc/AMh9liBHj4EAK9pV/RKQi\nYRLKPcVMYNbj28KOgR65fw2g/Zdv9phosNQNR+L30cc+zJmZ7OEMZ69ChI3F\nhJa6A+l0+ZOvXwNZJwolLMvAf2sCOiht2ZU8I5TTsUi8LqgKDtX4+5YxCf3K\nf7R1ptVV99c7XqSpXQ5cjShDXUQ5lm5T97YHOujlmkXdny3mNIXHEiKHmFdl\nnrgb\r\n=XfOc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUjnKIBDd3htN4s0JOw6XtMB150FA/GkJ/833SHibyRAiEAn7iZjamYOBsXfDU3PqKNE8UIzG7nNer23bg4nXtczm0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.04ccbc88.0_1583886901033_0.9171102498445338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-ripple":"0.14.0-canary.55338c25.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cO+TSy83jH6JQP2ylnZp2a63Z6ktFuj/bClPQcESl0WoF2Wwzi3gLCPTW6QyNtejn5aamW3vMcfpyvbGau9jBw==","shasum":"7735eb4a9a8576a2d83d312f8ddcc5ddae4a45c3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXGCRA9TVsSAnZWagAA+kgP/jAI4MMBqB7ds6iuT9z6\n85QaqtaKDSvVfe0v8dkDFiynXbPTwFh4XrJX5ZFX5A4WpWvSwXUc+V+d/AVh\n82punBSQE4Jz8XHKOdUHiLJQ9ZttQaDb1UgZNQ7pE5SzatnO1VtHNkKLdU9j\nwiD1Bfc2AXiuud4kj8oBTsYhw0CB6RJUIKZEIhT3BohmlONu3jZgAovIYBtL\no9tnUSApSUYZNa2gPAhR+A4Z1XLZmrQ/QFt3v086+yklXpiAOAumdirpHkqy\ndXsX7Nl+6Do7cysRTF//UYV8oIqznLSab4bkrc5SYXD/IozjbajvnlqufsF8\nN7qOtnUx3XDvQ+lTNOnPwAa4Ghr5qAze07I5yRvQwcUMblEuC9hZ5x64D433\nNoopwokXtNRraF5nFfCQSMLx96olnE0CO8s5KlQx4MIMXhbqz83LK/ekuLcw\nd0Au8F5YP1j1b/eTtsR97gGfzZYGe0HRLyEQo8qZ1GYi7YuTPKrr46sWhGZc\nFKegMROObUfC+IPVqFKL/ecEx/eub5ORtvJB0zKvGQ4haPF8tfMEswD56FqB\nhMLYR+hZ8ov7UO6Kxtm118HxqSoBK10y5O79+jjmSzDDOIoI2BjMfyPr4sO9\n3EyVm7zZloq0JiovnBSsFbT5U34CTnfM4VGegSyg2oBE28wQQF7d+8xBVOZP\nmXVc\r\n=8E2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiDOpcqmpX5UGB13QKQAZBiphKuPWjs8w7gFWMlLOz9QIhANPlfgcI6txgwuekFos2FMCuTpiRP8hqjiKZp5gTmv5i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.55338c25.0_1583908294404_0.6754334986268327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-ripple":"0.14.0-canary.b7e388f3.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oC9JkidHkufKKOfNCiSoKlFlQ9KXN+GOEDIZcj4Uj5vFaYjeW+7BuumrYXd6qTbGngTVdwTnZbE9mvhe9K0R3w==","shasum":"5909eec8c498b0863fb0b40bb70103cd8ed87000","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfmCRA9TVsSAnZWagAAyswP/2GViQLnXK+tghEl4Ozo\nyHurvclco3l89jRM3N4by5BrTVcJq32jWflF/Zr9bDBJdKWVpGslg/IFkiVu\nZgqDsmcS4gD/gpgpYE2QjuFXTGJg7En53CZclULxc/SvzCfYfKlrjBTB680o\nXO9SKZ/XvyjDxqQqz1rlUZLBuRKGY/6CAHGemEnHrYxqvd+QxknzwIkqU3Jk\nPzueWYOcSpS9z8pzyUfdyeNppvgOjgoQoXhZb1sN2iyNX/zNX6awZMq/yZNW\n7ok/Kic4LNkYCLYdIYyqqA/otHnOZ9FmnQt8ZU9KcRefxDCy7R89Vb6mKmMk\nTHRm/gVFgSnbPL0ZFItHEGK9Z7thB5VU7PiT1jY4o28sHYIAqYFGHJ6HmYIz\nS0qLbI2fJu7CQ5QncEiZCd2ZD9hbSSrSRZ9xpAgkB2YR4zXJ1k45vMw3eRT3\nmbR+fgajxveVOQEeb5Yc0atUZGoSvXomtncmMq3Pj/lmrm5r1wyPUj21x4gs\nVrpr45a/PGZ61fEBe91XlexyohqtCIKRzypxcdQlABYBxn5EWdykipgSRjEO\nb6MRgTak21dj5eKZgMkZs5qReENcpPG+HsP6eEZSAEK6C8fKOU83jVPop4EB\nYVfWu+tZPEeWR8GiliOX+diCT3N6evAfZEZBJ5RyLR2Ux0r1S9h4G1YF6pxe\nkEXN\r\n=xpFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9lxODuBkkzjWjhpv4zBA/TKvdvspPt25meURzy3MC+AiEAhGLeYzIURd2OHEnftI9fngr7Z/XbkBz0n8v3FJlMqpU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.b7e388f3.0_1583957990194_0.8229508567272021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-ripple":"0.14.0-canary.b3211481.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-B9KmoxJwe6kEkA+zBp+ThSSsNftspaez5+LOPzNPbI/ncmK4YbO39rfFiw0aWtbx7M5J/tgWDtU6nwfrQFIpRQ==","shasum":"718fdf6ee0e3a77fc938e7423a800657ebb8183f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjhCRA9TVsSAnZWagAAZmAQAJuEKHy9q1NcIbB7/Bsv\naWPHMo/ul5amSZ84Rp/OsNDO4MovDuA8jjKAwGHc3yrqC4O4bDuJygr57LJF\n1SvEzSeS/LCmwl7/BvpXFCbdqZ3tZrjQvV1OuLifrx8aOWcdn1XuosJm0S6W\n1Ski+a16EMVVl9GdH9anDV7mioGoAhaH3sTX8waTr6cW293fZzeABqWnWkf1\ngDqaLejybDTy+Hf+2xlq72f6qVGlqzJeiO0184q8rkO/ZPQri6RZWYn5hPt6\n2oQzwDxP6K0ICmWGBmG71GeKko2zFnPifE6uUN+xYDFwf/8/5msvR2U87XL3\nN1D3F+RUJiyYn0rE/C5P2ZAcMc1aMBDQKcH35NpGfIgKFCooFQSInQiOY9j+\nh5BF+tPvDf298Zj49s53l+d8pcVJjRldYfVJS+dSIuIZlJVYEANlUqwT1QFH\nmwKShPuaLbP7JuoLkqSpFSs7wmimxEIRmAwEJPUQgjUexgCboy8wBfGxBnzP\naoPg93z7ZqoHLuYY8uZwxwC20XK3B72EfYwlfn26olj8lqEa227DVkrNTqpS\nocVxRNP/9wLtD01+9++0t1kJxjVpUyJtUWisRdq8c8i7a0M3moYhOYs/WVDa\n2wBG9nohPzJ2fSXSx3i2TzXICrIs93Z93fCgTMD5i6f3RmR0wochwUW3Keiv\nS5ir\r\n=CyXE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRtKo0ZlojsOXXl9vccAoy8FWTCNfET+Chan7VX/MP7AIhAK4UNkjfGORaPQCaUuZCcxTuMZfJSnGLouXXcFQ0Am5K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.b3211481.0_1583958241167_0.5623540461863197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-ripple":"0.14.0-canary.0b5c7f23.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0JMCMCzknHur7x6DQP8OfECmX0SWcz3/WHjrNHbsxPw4oecLuOsNTaLMUftMYIPyJeRbWwiQPffSpOx0jHOoeA==","shasum":"75c3c2c099f70cbae82c1f0767a770b087ef7c16","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV32CRA9TVsSAnZWagAAj98P+QCe8SRtDmG4e1NP7tP4\ndIdGnKfJ/vpSo2X6JoUmL0/gaWpnfMgfjhf4gBvq7wkOTBCw846SuU4ROgJy\nerU3lkoBhJnwQabNR1FU0MdIP/QGWGx7fJEWJDXay9ikONuziTf/ngpTxHmI\nR/I7MeK0GSs0aZ6T33kzdTBEsHQ4VCYxC/J4Mn7Vn1Y82JQG8APKuvvSikj9\ngwJqKAJHjmnie1P3HP4Xjv6He90EyN8lNi9ytJe71zeK3KQ4clFWnGZZPGiU\n4QaAsVE4UieSpMwOIax+pnBRPalKUnxqm3iVh35b9thwSIOvZqJnBzkdRuC4\nCX9pZsuOt+d76SZDiYlylqfnXV12WWOHFnDQXRJSpZx9udOmRUr5Fq9ZquDD\nOxk7Uzq3hoyoXZYF5qH1jbbz/I5h9v0bA7yN2CuvisP7DCC9hGYP8ajxm0m/\nANw8IvHHeZ4SEMJtkixSdI3lknDDzOei/nU6r7UkRLS/6hylYn8OrqI84Ye9\nMlRpawZlumgaO+JIzJ1G0ruTrrDY/KZdyjdTAllqXdbk+qZ1gYqLAqW7iQVD\nWFx3sMVgOyXZMud9byIhCjK9wFQWZFSSnqMyjMWix87o30v5mvYEbfz9JCz2\nYkzNm02DbrVG4FGuJQTLy3psWOkt3Y+TQrwYEG/MaEEefUSeqhLljriqqLpU\ng2kX\r\n=2Gxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3xuhdqzqKQSDvsxniTeiBZ29dAroca+vDBrAj4z7pZAIgHan9yxlIl2P8NzfeYSAPWpgDaUx2A70EZ717TRrpQJ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.0b5c7f23.0_1583963637986_0.8862541730045252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-ripple":"0.14.0-canary.6c0f0b27.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-a3NTc120fX/uUI/KDcwoNxEX5EtcEA9VNWWjglMK+1iSZEy3q0RYQB4wMnWdDVCU5blC385D3Q/EqsUWc59i2A==","shasum":"a5860ec579ee3e65f303b4e73321bbd0b2e9f548","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbbCRA9TVsSAnZWagAAAhUP/34LHU7h8YICzDHb60ys\n2XBe7L2rPhQovEMQWzpaODP8hG0uoVfF2X36GcKmwo22YxgboLOLlZDuSq/4\nRDQa4fZTsxlgS2Yh0imyLG8jAUyMZdtC51Daj1GOmUKQC4ySBKmSt1bqJzd3\nfw5H+JaikObX3BLdR+fx0O6zFgLtSBFWwOC5Z9UUp+IQk88q2V6s++eSKBT6\nCeaLKRYHU+/i20yyhve4EcmG2TTWLRRqQwkzRPB/jNysKHwlqGaZEu1bGr4E\ns/R1DLBobxi7+Nz/a8SOm3sA79Y2yqnCeoDYaEPSH6SlvgfdM9iOjUHssIht\nZn2KsaaDMgIcjdXKfA5FWXn93Ch53Zan/82IwS0fjsvGTz4XRD1UkD8R+sUP\nHtiFSa0LC84sPsxJ2qlNeSeIuxKQsO+KyH6tylcfdLIHUj5S8NgBkz6CmFH+\nztTdyZ98X2t/AXCIqyObXbzZfErmZpkUeweElk8+SbViBRmXrrMXIWfbuRDf\n/XPvDQ4svpS1yqUrDP/TPjX1q2aJubl0WFkAn6Mlkx7wNpicRetLlBHqQAiA\n0RLMnse9nFCU90sx5RdBU6GPrvlv/nlsr50ObZKAYL4ZtqZysMb0i8bbqyrc\njc6FFS0LN2Ykysm23Hik1wNDqjXhJ6AA+K5yzPqK1WFV31h9yw1Lk6DDd1qb\noNRH\r\n=6dt4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdR5eJ9lkTDZxgL4gXtQMjjNIfGtUEux9JP0ATqV4v9AIhALBdKiKfOrCUzQWNTL9gtMZQhzzr8RK2UmxSKQwpLqDO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.6c0f0b27.0_1584047835488_0.03559456798496785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-ripple":"0.14.0-canary.b6c53425.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-K5dtL++IupAJbYOPhRda/b/EE1Fx17OLfKEJJh5njMNmHY5OCIZWP7GNlliLdkfhMXt3vxp4ueJDAkr5Afjn7Q==","shasum":"4c218bc45015f0e4a532968011cedf29a596d404","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":93915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7r+CRA9TVsSAnZWagAAI2gP/3FHpY8/CQBhI9HgzqWn\noFmrIFvmXHqetIWa7Vf6V0hMq8SPkGiFgrHASdqheFO2A3DeE6tNT1ysD70B\nv3TrjuWXlXtxf8P/sq5NRsfnY0FmpKiVAzasTrDupVeIu7YHmHo4nyaSrDka\nK1jHNVGO4vK/lQNs1TCmKAISScs55wGmbdl8f9hlDmJQFda7tRCwnf92zFww\n88S/vktLI74t/63+h2EAIEvym4D5CuVsxKYQOeg/td967niN8D6Zp88lYPx+\nM/bV8YqA5dm8kpB2qs4+8Ij/KG7x+D/kMGlfVnIQolIB8NVceE6eKPxfMi+j\nQTjB9JLgm3VmSX6Zo7ejowbHnWTVxoTh35uV01/KGSTkG9GWNQb3LHC1GOQg\nwnmLH0jHbOkDHZHLWPOmHNxwLhVGxWQhjbmvnny/ebLywO+niHV4bRL5PaXX\nEM2V3Li2p+gmsf3v7JgpjXtH2ezTatf+Urba/f7B5AEHQqStdmDB/R0PHn/7\nqHAs4+Coz2HLrX/ym6qnkD6WXcKVAngSfAENXtNJCEamH1VjKB6GOknMaXer\ncTeFluj2KMfPwZAQT/DIMnPD4EFtdvIS5+VfyQH52HcQo6zo9FyfC/1MLnl+\nEMKrFoPxYrmDVOYgRHe4f/PBXR33JS1F0rnMXGauNiBCU/smaEO/kAsh0B9l\n44Ot\r\n=WsHH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAB2ud7+vS4bKlG9R6yk01xxtieEPAYhAVlMaHgAswjAiAA11nVqsv5w+IQYU2aGZ6Ws8LnzZQsnQOljKFZ2HkzsA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.b6c53425.0_1584118526425_0.1683612265586807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-ripple":"0.14.0-canary.306cabed.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-onCwdLB5wdH6MgaMVNVAk7ExdxXzymq+Spqy7BSpZQCj118l4zvKYW0rNP0hJH9thOVoGj3UyrvWVC5AB60gEw==","shasum":"2cdf8553727461f28c06d9c846513fcf003d9761","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT57CRA9TVsSAnZWagAA09cP/2iQ8cAyfQifEj+Q3qxp\n735wRJJDsyoO0pmVztWZuc+xHJAEEz1kl27X2NUOphszZ2pq3Y150/jMQTBP\nWnApGK7eDlUsBdfofmsxSzpjuiG8Wfn4sbiZfm87vMlAyzTG3HoKcweJQtDA\npqNA38oTFcyiU6L0PCER+Jw8PvVulr4g/hioOvd24diVMHn2Anc9JJc8ZL7Q\nmj3sDQYgAfy7sBc1zXaNCC9oENQES2zGxRcQQQvV8XFM34D2JoKBfCvGQh2W\nFAjvtGyPTrJA9wIFrjhIbHlCOMJAKqVWp3k20i+UnqIpOyeEzQduZok87hSk\nT5WDfAf/KbqDGpHuA7B1d9PfhVDFSGpEgz/HZgrLpTOfsxvPxKl4oE52Fgsc\n5+liF6B2vMTl7a0E6UJYPCdPWnbPSHJHuc/NWMK2yFX15hueZgSuXvCYp5C0\ns9KUUbGFvvmmX5CaVkc/1Fue8b2tz4/ClXcg9CoODj0izIpetWJD1LH0XzyJ\nDD/CKYVu8QHZ4F/0SvWiAHA1pTnnjJaggA0SPWxGKUWnDENJbUqfv9OXon1o\n+xHX6wKwpQQzPAbjMoY/cFOe6pdYk4asRit6AbKsBpG7N1xjhw9/21q8i+NR\n+E3F1qvVEI871256K1ZuizAU072RyMNFuIBEaQhvzYE9XneFxFU/ralUHw9O\nW0f8\r\n=SeAV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXR/0BoA0q3xsmbRvNWh4p/4ogHEt69/SLL8m24n8odQIhALkbLMn1RQlTc8g8ahz70lTx3wa7sSxsHAWMtFAzm2WI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.306cabed.0_1584479866880_0.6378864011011776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-ripple":"0.14.0-canary.4e250cbc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oYKe699r+0KczvcWL6AGg6Hwl5AhyJBmshMci6UwRwrzUje46Y9HneaCTFqmbqjF+9Qcpc2tP7fuXByXfloJZQ==","shasum":"b83d90b6397c1f17155d87207d924b0a4150af80","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/rCRA9TVsSAnZWagAAxaUQAKBhiA+4p89RCAdxb/YG\n7zMBO+v8xoMpYdpWcx7VuY536K4XYjrwvwOefWL16LzRKLqJZMGLWcSx9rJK\npVFkgwBwXl9oBrBN72eiwFOEhy3QO7uUxcX8w2zUmITkx1xfxOHb76dYLsO3\nAsqtyTKJEewok2WEM6ltS9LoKosPbKT8TjtgIp+tMVvfCuyTGaBkrY1y8wrA\npGcxmnvk1/VKeQHngnIfTqzMxiOlTT+tIeL1+7r7ssTwSprOYuky1X7vEFPU\nPQpg61GN/5ENJhtOIzKi/RwQ+bL/LPWO6WBxjKrGtGxx3WRJYtVKeY5DUXCc\neVIaOGZLtI74J4KBRwQJBmDHcAvaFGHeuiA/4c02hdq4pPuGp3GyE6tS4oyV\n1Jrazdyuoz6zrBg8WjdmxFlmNOsqxe+FLYHns5UTmC/RI7AzQSap875uSfA8\nsSrikqs4jtBvcZ/dD5YwREIosIpre9ZgWpQmTtKObQ8rBo5KqPF3fLpXFArV\nifmHHKgszrPs4kVF/TKpnhZONN91oOrFRtzOGqrTv6r/gRV53x32y1xcWnsa\nOPfyUUPWUWQVdyUMsge5AYbkV/OP7nnbMq0yjxXcwTM7ROH7spy1+SRpMWEQ\nkga4gbOyTgx3BRrph3ujn2A4LQi+7VXs8CVCeFM4p16CAIcSIA3otXszUy4u\nMQlw\r\n=bNGL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGdPOs2BRO2WT9sQfiHMV8oQ3YHs4Jg0Tn44BfoPGd7AiEAmA7iVrz6ARJv81zGeBlaagFreohurTHd+5pTs5tC4sU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.4e250cbc.0_1584480235010_0.8726440679420318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-ripple":"0.14.0-canary.ff82d9ec.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-+fEKW+YwuMWEnlhPTWgysCR2v1qSUpgN92qe3rHhgn0mo4rjJxf6IDgDdMcgzphxG4EX9j9DggElW84cxaV24g==","shasum":"9cc3f8bb832538c68893afb81947c01f900b9e91","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZACRA9TVsSAnZWagAAE7cP/2dsXfuPk+MZbUjGz6Dx\nU7UzUxouIHXtqx6PSidjY7VvkAVmVminoZribVP/cJpKQizs6cQdCZnjdxc4\nIl3NZ/slMNkHLcO+Dz0WWRMBiDHnV+d+KFF/Y35BVTJVdrd4Bxs+FbwA6Mb6\n7Dsbj0myP9Pke4XTLPdYvnAJRpY7UXkY4FVjdxOEoAWGKTva03bnlCIwVKl9\nP0iT8wUJ08lHMWkrZ5Gc5u7xz3p9Wa82+lRTpD1V+yUZ1E1DzAAexaAO+G/4\nhZUM2UvKtCIL0hXLGvqgbOt4S5zaAnMvEW7k2Hvm09AV9N+hrQBlvC759ITO\nkR9JE9YIJetAQgt6Vu0wkE4FtLSJdCpBAi7ART3n2OzFhh8Xh8/WHvJ0xwM1\nQqWxcmKE7KL2OveGQfE30dv3GmchiCtO8g/JvOyn84o1D2wvfet8pl7fh/Pw\nnxkyRjNR1Se28SZynkuWbM6Wk+TRVtV3LaBGZ3cSPnjdCX17ku52qjM1oJSj\ncvgdeKDy6B4aEUqConbtk0JSZYdYIqAhKFJgKB5UlTtw/bW/2TnclLLfwir7\nyzRdBBhdbnsvUhzWixNnYke1AEhnn9KJHfEDEDBCALpKIeEBneCrR4d7rnVX\n6PcM+SaKganQQtonvQ3NI/CRStvHQDwwTlVaNVsBDON62SgL3iAh+qGIgKGG\nVQBo\r\n=FeCz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGe28JAx0/pS4lpPJqivLh1tPE1+Wp3Zdf6McTA6KZLAiASAUlEN5o4jfQ8byY2RnzHuWI6kj7XZ0mRCoKchOwTLQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.ff82d9ec.0_1584555584327_0.6815191090883461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-ripple":"0.14.0-canary.f50f48ef.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-4ig+mwgmydRlhHRcGuLVf7cPPNvCLfhUhsBRvA+R7DzEBcjpygGZ2L0/MQLe7ZkwvDvishHCHvLT+UpUwbJ+xA==","shasum":"6181963fb41e662654c4f3af7ee59703357d9822","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AdCRA9TVsSAnZWagAAR28P/iFkOOYmE1aIARI7AI0b\nU8A95jA+upVhuj67ZH7KpZaTlC3nBus8SiXSAlJZcnadIOM9DnIgM1D5D0eV\n2aohmb2r8FcOoHdF+WxRmAvdO8k+aR2eVf5Hy26gRH7+fIKn2MHTCs5iDvbJ\nyYJ8B9JuktLgUxJ7qgtmIVaakoq7RFCQWkg12YsdKZL5CGyfdA9nL871XZ9f\nYTJtrFXG6a2Z672eYn682BPAo5YCshBugw4Str1UEq5x1G4QppZygc0hGsds\ndkRxVwhRZWXHPycu+pMBRleQnxQMHjXNwZKyHzID495sIX1bZ3QnNldBgeiV\nmskCpQvH5HwBdpN7u0JsG8URtvSUeHYOWXwANJv8nHPFnCW1sbhx2A7eDKhf\nYZPP1+ddZZSWh9ZHRya9ytwz7ixd4vvrNOKAQgxEl0ctepaNmtk+qCQ0/s9G\nLc6rSL7Bk8GgE1T124I+yAh5NoPeKV2OhXob584bcE2Qlgqzj5t7YbVjqmfN\nhRwjduTIb8HWIebvMVYAGKdZ7oGr2EzlhEigkvQizyMlKUieCNOjcAUO4Br3\nxtl75i2yRlQfuRpqg3T0NDJ99MshpkIGIOGFZWD6FGq0NXpds1RCUrJLY8l8\nCH8GATrOCsy22Fv6rr9BVwYd8wZXoG6E1WkT3gGOkb9kUNXzaG6GOMP+5xm/\nDYgm\r\n=EQX0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8GFRqhzvOUALDGTLE6kRhKdqPRFW1kMjOTqZQRXXZ2gIgBsZmKbNycb4UuyYzVaLW4WIbiXVV45BgFZM4zbU3Hoo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.f50f48ef.0_1584644125407_0.4993473323626283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-checkbox","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-ripple":"0.14.0-canary.134cf877.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZZDIZelMqCf91F0cmLjpeOGRawkQWxygK8K/OVG2yRonlt169wOYeTl2IcyVoj7/hqd3Iwvx54ks4YfRBVuLjQ==","shasum":"717a70957fd122b1d115f6ae74efb723f0536efa","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h4CRA9TVsSAnZWagAAMEAP/29yI3yb1uYDJXAZ2L7A\nIzsje+jZR7EK5QFjhgRBHGtFzDjELxDn8ACxoN3eIu3sNaM0efjJ0JOzOV6w\nuIDtSkEpmyTl9Fx0owEXyDV45Bw8VO/Ar2oppT4fuY1xIM7j0+FWvkBnEOwm\nvRr/oM6YI7f7O2eIgxVD/p/yG+HUqn8eMipGY41NzMaTh93xHjcaKAPrTKWY\nicoEOt5awcD1idt/WXyhDggoYPaQW2KZgjIrxHnP4eWhVIzU/KgmZ0SVnkTl\nhHwEzR0ZKcRxPZ5SGdjezVs7gwS744wIqfl+qfDx4rvTSuSO3KggGimZ+93d\nPXpJJd0ZX2kUZ9xxlVBhwjcgfeto8NY5eJdRgMlBZ8qQrJvEtnO/shZ5reo3\nwMSn5/amJAOreQjsrj2ixOLGz5SqgG1Mk8Avt+r5oKJmpQDylYiamrlZ7kTM\npBO/0ObLRLg8ZloL8NjuRWELm02+llWyVnnCl7Ivi8GzX80wnaaHEjuilN9O\nLg01udh4+6YGNHFn7kxGJ5zd0yXlaJ5vcjklkE7zYqm/i2wLHpsBMgTmffrh\nkcNIDgmFKzHuuy7VWgWPtlN915HS4fO1/1kVnDGSb5LqFH3uGUm1UXda2Xcq\nW47nka9lpsePI0QibcTbR6UnIhEONQTKsBTkyDwVq04foROQhoszlnUfVFXG\n5Rgx\r\n=24Fq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqCI6zAVSZifQjPY0kz0ySdXceAW5W0CKyBaxI3oajmAiEAm+xid4o2+btDhMEzosDHSqV5GYcj7CFjO7iixJV/82k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0-canary.134cf877.0_1584650360211_0.1588027235034064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-checkbox","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/mwc-ripple":"^0.14.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-FW9cOOTx5NrhvZo04PB/Oc8p7MZbAMuITWE1tEMzYkrxQUiIcQ8+hnCi938q7Oc+lqFhXo147mZX6G/CTOpgGQ==","shasum":"fffd0d60f47ef252e6616444a241135862713fcf","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.0.tgz","fileCount":16,"unpackedSize":94040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QHCRA9TVsSAnZWagAA0+gQAIm1svSA6oemsAcqKbBf\nQaZKhelv6S0EF5KbFLsqe2weWcuYc1ljECtCNTU6/eSHOUL53gVQPkp503Fd\ngfhYfS5PgTxtHajAFlR5nn+q0Ybl8SDZ8lQHadey3TNS77xJS5MCQAYnVoBH\nl1W6/2L3tND4dWDWuMnPQRrJc6mpE5bedo+ZJmDqaz5tizBxZ64T2jg86CbS\n+6xS+bqmXDRzWTyHf5SYgnsyvF8zcfYoYcqXjDDIPJOe+shH1gqEXLcfjy+1\n8WjRMCmZr1NQIXCgR3infE1oPmtlPMsyqlFpfPwCD88fNzSqH4/voP343hSP\nUpd2/igE1dn1sRFV+fMqIWojwCWq/Kkj7k2j0IxkDXocGFsG5l46Zqc0ypBG\nDqINrtEqGGq9U6na5za4KYycFUGGwmcrKWjP3M7wygRLA2pU127EdZ2R+CMN\n0oPyvk2J5lAeU0MSQydnG25qoW+s/k98ULbIUUsN7NInnSZ6TNIm6e5cBoHe\nrGoIHYAz91B6DUHyOXck4za7R8YIzwiCSzLZ8Gbc929izrWTm/RIV5S9Qk1u\nnh2kMh5HAbHkE5SaGQk0MXOTs/eKCZ6yjWh48IXnQTEllMf9yJIbGjhv+0lb\nyUS2jEblIiYbDny/s3kpdS/E5ZRE+frlCCPJi5KwmyDZk2fignjoUo8dV0nQ\nWv4m\r\n=JzjI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErFACl9kIoZ4q0N9nq+aRf4J1qRGB6kQyhGf92/HYBaAiBViF/b93Wq37WbL/moLZiW96wxKEgg+EnMWwr5Ul05Ow=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.0_1584653319554_0.7187834094280434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-ripple":"0.15.0-canary.2c1a4913.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oQNmmHcLJO/PDFNirgcNbdh0bs6QqQC6WBOmyKSmFnB8p1NOptJ/Bz2fZy0ptrdnLe20jkhj9VCKqAkSX+gVTg==","shasum":"3880b5213419dcc0f6eac842ab2dc4d6b09ec441","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/mpCRA9TVsSAnZWagAATEUP/08M94kc0I07zWCNUUI2\n3L0mwOontdEeKmeXh4z90KeXHEb9gKCy8aPWfH3Q3TUeA1EwJzdrDeLcHRrk\nTZB5feSWZfve3pU3xD0o4J2K0jcNMfXmsOTgSWhHedO2cj5jekADxYmv5N/d\n5fYWHdi145Ul9GQHeG7HCGKlVmQB6IwfNP1G0ZRpiZhYGyTacgVKR/xmrCWE\nXsce9WSv6XWP0Xp5XiKgpe8AqUqTNXiWLdVHxsFbyDGUsv6RRj2MoIxZQ9Je\nxEPnShge8ob67eniq5Fd88sBX2OmFAXmXxcXWEZdyxqRCpu5He+eg8OaY8sy\neUQ4ldXmfVjXMdYtIDZ/gB7oKBVELh6pr9Hkpavzkx+gpoUBJpLg57t7sFCb\nVys5oBty9xz+W0eCPCpYdFQs/RXIpltOdRhymnlr2mxZ7B/oRIODS9zzJbnu\nknclioefsy1U+CWiJrmNNIH4xfyzSUVFUEWWqvUbUNCS+shfelorKo730PkC\nXE5W+rDmqDuro5pRRltKtPY9KIhd0jU/Ukt8zrnCpQ0aWDraogdL5xNLNpWQ\nN04pjOZARdVy78M656HtQfwWuogcQ/Uj8U1hI0uteqMIdcitr+dS1/YsfSJH\ng0lY/iKwuOyLj0jiBokAEHPki3LSDlAOsPGVzr3NoF0ZS/I+c4y/Rk6QVTh/\nTrNq\r\n=Lkj3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqSNGcgDE1p+suANVW2lLr1QvKwPriMN+8VRjR8NCwqAiAtEzSeaOFr9kSEpefJBHC5p4E4wBsPfBS6zkwlaIQ3Cw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.2c1a4913.0_1584658857466_0.8738130923554897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-ripple":"0.15.0-canary.3a6e481a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/Lq8PbUTtAG/2unhYRChpRuD0DYeUYxD1r/wevtBny8XUmJZXWV7iTnF8cPyhqWPgBxNKg88dZhHdN4aKyI3QQ==","shasum":"c5627c5a3f9945984a9438703570257a7309b32f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQe6CRA9TVsSAnZWagAA3FMP/AuN3b35bz5Pu5MPPc8u\nedTm/iUZgyDqNzTfqX0yJCHuZ0q2CFdvZEjCntsiv9dEi9y2b/rqcmWMhIEr\nOmDV+nzdfHCys37NiyANP53agjUYiio9xULydmIGHRL5rFlCfpYAwiVkcBxB\n3JLpY1elMc/ewEuQmy/3ylqCacRm31BS2g5pxbUa4lDTzfzEVDhv+Ojz0GsY\nEteTAj6XaHC2pUDwYiMFV3NVzN/xC/Cv0/i3bEnvKpxW7VXanwTGfYy1HB7X\nKLijCZbMojAKiGzi6W2QZlLG93ffBwFxr/Bz35q+6W8/knuNkBKhg4i7PGVV\nsxPkCwclJwhZfHswfg1s2KVeEPlfMLOOg3tSUEuldtWQVkZTQcgqgpWSc3H4\n5AcMA1MaUQOi8bSSY3fy/0jH0GijDxO/A1MLBtQl1whKM956Ov17m8obRH9S\nNtTCDIKS5t4NsqkWv+JHg4wlnAeA2m0WWG80f/F10ns+gRdH2Y6lCbMqxjpm\nsBYeQ7hL6xTLf6Mn3+A1cyxcYs/6KXOcRJu8nXdJ3aMWdDyWLGmN1MBUG05s\n0lffMEA5wINz6E8PSj7ZqnyRmQ3PeymGbTV5aJbvLzHqE3e4o6b+4uxZ5FT7\n5HFD4LR0K5QpreiPkzlCAPatXvAQewmwzO4z018Ezq5338WmMePsxiYSguKF\nnlFq\r\n=zGiN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCy/20wC0kQpnQArHqDoaPLnmA30FFoBcEywF5RZSqu+AIhALosxHgZWRORhSW0MKcJqUA72cwQ3gWmnYx3t/QkvlXN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.3a6e481a.0_1584727994303_0.8766786258067247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-ripple":"0.15.0-canary.603d6eb3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-a8g6mK8ck9QtWH7ubQt0aU4/XFsMo8MrF8IQ6br5HatYTCmuQfhyoQIZqoLB79FLHnZyXF7CbsRTM6gymBwhDA==","shasum":"53e5e0c81321a11e0650e2baff88ff462ce0760d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTc8CRA9TVsSAnZWagAAyHYP/0b/ztqqVcT39w463nEV\nyLyufOJ2nYLEEgTU+mXD7iGDohaX4Wn8l6er0CIggmAksDGRKLhH6GiCc1RH\nAgO0R75xHpmwWy1YlhIutFoXAGFS3W1IDazafITHYkY7ccYmrmV2dxA8K9sY\n3JdBjuNev1HJ4xQU96xUjnRIMVU5HcDZKEzj5/g009ZZ9YmsZVnRae7fFssA\n7KxAHhxTnz5WeX+MrvWLKvM7kiGUi7AT43y6nl+rMRFtCWlrA9SXs17Wbm3b\nvO9GV2VUerCAVxWw8ZpttsXP7WqFG+10xZVIzOOZ/IolEElVvPLsanP7CkzA\nf53pUiWg9dPwnjsCHry1r9Rr4rbhNZ/Nwh0BqPZsrUJTn9tAf2tphudOo8V8\nsuHvWTHfjgldLHw1xkuMQ4C09WlA2ULZLvy2GcqFtiUpUO26xniInZrdvvoX\nz9ALcpYgzLLF4VJltGBVblOtliSW4PkyGHlK30PVO9XgkqOvBeAP/zPzKvVc\nOY6+WyuznJ+V6fyUtMGt6veVh4UXlCtN39DYka0badaPotqo+UfML9h+Y3tL\n7Ga3gpb7KRel5OYtXcHK5r8SlfmvvPD0w92X9OBQ0Gj2fH0PaIpDk8PH9Dma\nVfFP6ctaFe3YysBe6QOMqeEwevF8e//jugLcdTzPpZ/AvIyyWt4V2vx+4vMC\nUSHZ\r\n=NH2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRApQR4u+vWIejf//0CIlX+fwhwPcJ+HhSo6f1rHR8PAiEAggXVHKLlVpSZXG0iSefIo+8sdy7905Lz5MuIHUf4Ars="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.603d6eb3.0_1584740156604_0.983438171467949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-ripple":"0.15.0-canary.05c6a93c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-V2644a8LFAAXtQ8tjFcgCmWIaWMDAmFagquD5UNSjvkmwD8KmOsLPC8ivNyl19N1bUdNDYN9AZcpW0hdKD/5Lw==","shasum":"0c1178cbc70b482edbab5ef6e20a1e3230d84287","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":94092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWQCRA9TVsSAnZWagAAX0EQAIYlZmWnC8lBurkiglN2\njym0HeSs1Vm/5l5cx/r3canl1Oex0hyiWKj1kX6eJSgNC3wWrdqASmGfCRQQ\nggBGbmfKKv4PKv3AWz4zj/smzPDh0K7PhiapKpN8iXOvMX2T/YOc6HWYG2ck\nm3vW47yUvmwxNalWErChITwoNNqu5jm0oe7tjeh0fKq1zvME/BjagQgKu5sA\nFYbxlXLaqoHvBtjhcxcHUZg4WNK7uFCEJwWILoMR5s97LwZfjTB/inYoOWZh\npa7WHrnf2UALOB/pBfNI4YmF8MxbYTudXRRJxchoi/GP+o/APCugOmupmE+a\nMw1T22C4QtwA5Su/8mWYn/+/+hzmS/0D7e7799dRcTNU9PHvuqvXrhCcMiRV\nCNQDyhqAvbrBaiOFPjnvCsDoyj3+MQxnVT18TTxWYvpHdoxqtC/CuT7difLg\n3aVfiLMIsHfFI+jUiJGR8kdL1UeRo6U43jdmR+URmVxeSXk3EAO2i3U6oIJy\nMwJKlxqzcE6lwb37wxFBXdM9Z/iDV2dTJG8sIZxw3VLevmy1wunHUC/SuEQS\njpF6saU7wp8DYweSRJRDz5fofuBsD8XU7N2gPRFT8MLK26eznev0qd+rPbw2\nsGIDNawqyCufGeJCYbDUjFQLPmG/NcZ54WY7uM7Wh95E+8KwDnEK9/W+qlZ4\nMBed\r\n=4VfU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHaIFDOtIgu7SOamuBVqxClmWpBdvwH9H8cV4tkybIi2AiEAvXJt4AhTDBoZfCsvU2k0Yp9vD7rrd8vSJMJoSPwd+CI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.05c6a93c.0_1584981392568_0.44359823998648773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-checkbox","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/mwc-ripple":"^0.14.1","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-US1C+Z2XfNW2K7s7Wzj7gSI1M/Ah//FeR1D6SY/6K8PIu/gtrgx6iFxcByVq7aws18ghYX6jwkDfMVZFI/uAVQ==","shasum":"7d5527711a88e02163f82b56043c21e85a249856","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.14.1.tgz","fileCount":16,"unpackedSize":94040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiNCRA9TVsSAnZWagAA73cQAIVptqJSUWtwGyUyWcbr\nA5HE4z30TuNeAL0yMRjBfnWdpU0ibPLn62g2aO0qkkxQAoDaksLqDiH/IXAe\nj9tEfLJs2hoLrqQkLPSDReatp/bWNrSw2ad06OK+AyEInieaNEU09q4NvKhD\nbIS25iGrnXhApUekVjld+8gQx87rTMZLtNvvHtQtMRzudRVDYw8Pm5MYwurt\nnJpu1uIyCTUqi47lSlU/Nj8+u9L9C8mtJg9qFAm+Hc7CSGuzRFh9gdmd7UVM\nMS6tOykoNz31GYe+AGtZayMP+MhgTsUPxkppPcHIQ98wAYrn21Fgn/6WGO3q\n07jYrgNpC+ac5jBZTwDbKffV90AMU1uBswq4mXfcP9kqcsOp/lhFNTrKW2JO\naPHcHrgFZ5+ENBsevr6G9LQkfQ5qeWmzRh2clpTyL1vuIbjsq6iLj1dEinQ0\nkOyg5eLxGVcpRC1U34LOjmC+nrtXsFjeoFncGKdSyuB+ScvF+5nGqWpO6Yzg\nrLQ5vZQ8JrhkIr0n8unCjy6ACIfsEfmznKS2mDsY8zjjTERbWXHFifRMzjPE\nH3nsa7u43gNJb8I9NYkJbmoKMK4dEohVqjV7RkfZp9PDHVXIYD4da4HUJb1v\nApbZG8VsYxUPNiJzQdw1QWcMoVl95XL0Ak0NlZW2F9+T2rXDkzfNw1REC9bA\n3Z4V\r\n=HZZY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEn7DV9v9QwHE/kKEwlr2M8MVhIvJr6c/ciqNI17ACA/AiAVWKecqdT5NxYDGZtip3zztFk225WdbhGvTh01yeKskg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.14.1_1584986252758_0.6850462272531772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-ripple":"0.15.0-canary.4e6be3f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CHgfvFNgSLPmjNvP4bwqla4Wvx2xZe4diP+FDkJXW//rhN3alxOX+7vzKJshlQ3lDhgecWEVQIM3O4fjzv3O0w==","shasum":"7bdb068d35855d3e03b248dc1b1ef629d85ea804","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSMCRA9TVsSAnZWagAAwOsP/1Dx2dKQXHwwlOcYFtu5\nXMwLWz9+9nusUI9UXE250EQDSXDK/2K1sb2qHms5DgsWks22fb7QuOK1jHh/\nG03M99k3Or93bz5xien8QFUfqEF2r6HchjmiQmaJ8gtAzHONacdAvoDY69kB\nXOK94l683AShW7CB4s+iJKkOD1e+ch/OV0qUghj/led0QnUD7sSfIP+XhC3C\nM52A6uecNO1rMJBPh0M2N10jRZrhf5Jjw2hkx26G00ghtGtbPoFaS+7e2eV/\n2nqwozFfCBioj1Is4pV2e4Xz5xqBOb+s7nsd6cE0tYgmMYLmGnltYKpv+toq\nxZhw2T6o//z+0BNzqU6f8YS1mtnlGbCGRIjvvhAzw8BeKfWpC2LX4Cq6rJML\nP+EoHj9EppohJMLgO/ORsTg9MhBC3no0aJ95AcirBmWAw+x98pCV+ryQLaqt\na2xno1So4k6FTA0nNSZCqMxnzBDf/yIr8Ga5BKkMhc0VTy42OWM338UCscp2\npckTLRFhfzYKSupDXkCFcC3oHNsIGYo5HzbW2m1JvO0bfKyZ2CyExyiPF3Zn\n6CYw0nKa3Rr54kALRGtMlgpp/Asj8uZVhB+etAN06y4280q30/191IXfg++r\neeK88KEJTg0CKdcGruEiGsUl5lIcuwsha6cljzhyUAozyT2YgPoJjLeCeXSF\nx+kT\r\n=1AnL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHd6GQkCdQztQ9p4xURDbu7DjjDIzef0WMopQz/JIyPAiEA8C4AVozGy5hwugZQR1pXDKLwwDMRpwyylpHJlTcKp7g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.4e6be3f4.0_1585083532313_0.19648826143579035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-ripple":"0.15.0-canary.c29a683d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9EK/XAwvJRjswDCMh9idZ2mPHFHJ/HQGG5N/tScS6vrUd9udtmUO4LBMLCDIojF69+JXg+yChnnIyFCTiZ+Y8Q==","shasum":"667efe16bb29dbd2293e6681274372080054ff8c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeni4CRA9TVsSAnZWagAAEBgP/0zQMlSpHcwVo5yMGh7a\nGRPgSaPcTpsSsOOpc7mDJw5uajMEcR1zx6lJrwAbBpOl/Sm6Vy/gYQhGHLeq\nDmbTDJ5bVkDEDFAywRawSjKgb/u4xoPvpqbLwkjSSsEgRwuhJR9iplfYR+fi\nvWjlGYM9/gQP1BrVYV+IBNaT5KD1ssERtR4iSVQvwsKJLpJAVdib4mgh73E1\n+YSzhGtyOysG63pbzSqirunC7dRqcWQa9j926SlKpU8iBCYCtLKxlPmmHUrF\nPsh1UAAzJppBBNmgZhModkcqott9j4J/vy4j1E0NZ60N2mVNmKBF8jarpCQy\nMt35rhQMXjJ2PxLhf/LUDwpAwMRt3cNlZfrwvkQ2kxPRteoGWtGLm/zkPQpe\njAQOkbgm74UKcvbH/8TgbOCsdevtXHZ/fI5IPpWw05zYYivALvvV8eAv+cRX\nF8avF239bTxZPoz7WX5FavVk9ayGf5/4RK4L24Havh5nVbjksB2xBYir0N01\nnfLdw25S/98iJQhMk9m7++I0lms2YdYBnWnZOvHit6njnm+j6OERqP9vFLXz\n5WU/MEa05m5CDnQ5UA2zFkWf3cJzInLAVnpvozA7IxvFnALl0gNLcUcj4Hkz\nBUGAKsp7YAKXs3894Q6yjz73jklmz8siJlW3EXVEjEmap9oiZJtSJGPnZ6uw\nwckF\r\n=/Fka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFi/hkoSyXW6iL5kmvkUy3uHCkfnZYQRdbhku6b8xBLTAiA5IdT3j3427GwPoKWgPDGoQq+Z2SEtiebKB/shv6e31g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.c29a683d.0_1585084600314_0.6256991990153427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-ripple":"0.15.0-canary.fca3dd9d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6Q3FuHRtJClmdpQ3GVNQEBq5s7L4y2B4+BVyme5MZ4aJJQF4MzrXVNUCnJbOAPuuCJkHc2lGYMTrW2d6iJUaCg==","shasum":"7542862a6d9e79ecd3f699f97725474b3f393677","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsOCRA9TVsSAnZWagAAFbUP/iu5dJj2mfIBsRoQlxWc\noT/bFZCCpvwhmb5CN4D21LKx2zJI0wDIiOoOvIzJ984PqTm/RfqiVaaMqq/Q\nknzgDBZHsmi6zVorRDiU2TTnXsWXYF98AP1RrQUgUEmpat4Z9aJ3RQ+ZMPhe\nnxrn1zzWiWUaRetC8RscLAH90DlMpzmiw4TlI8K5n5vanw4be7cEli2x+CBR\nXdUJHsiwWhYZtT3u5yqQzY9LSCIei1IsFp1oeIeAXImbwFmMOiX/o2c0GNmV\nawGgbpv6Lol1zIRUg/lt/IzOQs9nrTt4x8poN7FzonIkKd2BP59WnlA4neNU\nh1TsTeue+UNT/KTd01NbIZBC2Hxkc2XVGeRQHE/B5PYRdMRPs033i2pkpGy5\nw5N93GptPbOX3yg3VHhmooorVZEZ0pPE9X5LH+Zd/6/X7uyieyBe/hNZXXUb\n/hpoe3oCxbgy5dkcetwJYlJji10D02ixxh5rhlPnK+qkHoeqeJfDWp55juK1\nETPZExLCpu/kld6Xc0e9sudthSWFEspBmNBzA940kTxAoBrO0+W2Wa7Fum+C\nv7XWIuBLqnUrM1CC/s8CtsT1Igxa8FWhKP0C6Q2Ib4cGrAKsD36K/ikmb8kf\nGV2h4GAkUvFfNRAXH5e1E205rvxVZCx7LsfkMeZ+EegnEWiLtIWFvPXxWJ/F\nbLDg\r\n=Sw4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDagdsX9ko5bEqVSFgCtae3sPvCOwklVhSxS3sxmbMd/AIgcgJRZ1Ntj24e/oJJS5nkTYMcoOqZasV/HBlyoNx5xJs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.fca3dd9d.0_1585093390017_0.7178733032754685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-ripple":"0.15.0-canary.1e73da49.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PEPfZhPn6PphzjSzsLR5Spwpv+ZrA1d2tzZfdmMSF1k7hTFeDw+TAUAgSnpewvPgV43SO92Abhr7ows6QAGO+g==","shasum":"905c8b3f68b65378bf488d9c780c00c801bf63e8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81WCRA9TVsSAnZWagAAlkkP/jFHsWYOZrZQGSw/bhej\niQLFzDVgZC+g73xzC7YBMAKpmBu7Wm30hU+j8NsEssBjUy1qGSvZDjc2NeGw\nCtYuVt66EkIcIxGD162+cgsBRM5cLA/L9/T75LyMPd7pRoc0omyZT5unSpl8\nsJR9QaRvyH9YKoLZE9ElTF2UX/GTxPkxduGBTdX2wb5rF0358SN/uOvp9l5E\ngxrOlnyPlExM2zbxpJp2sia+jNsOir8Qu4qchM8m/ALUigeE3u2KtiC9AorP\nq+SA1JTVezSTvQxehMwBufoBNIRFZNzdz1bA9mZ94LDG7rMEt6VnghUMsdVM\n9XqHkafPhf+Pjin82KeNQo+LriRMClydyfUlwwaeLUj99asnQpPL7A6O01HT\nA1paGKObS3msTVAa69VB8BO5chcUJs0i22Df58YzLlDen5Z5w+Hf4XBESRyX\nbLFciD8BE0gHm+RlBiZ6hJST6+AakvBiKeFuNvtfBSP5yY7O27S2nxU2WE3E\nIzKZXcw3wtf/O5PskIrbCcNdx5Pi7cvJTgDaeWSYaYMzM9/CecoC0YCktb6s\ni+mmUyQCbv0tkDjaMtegnVGYrK+0sT4cyr7Zp8u7MPLd5XMFoXbEFiYkJgwa\nPZ6Z3KGWT8LJ0yQ3k4X/u+QoGxT/6/kYGWRWAagScBkWGQ9c1Y0dC9DQDI0D\nQo11\r\n=Jdlq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp1NnqszgUDxCTV3eymzD8sezmLGd2ff0VRceBzSc5qAIgA09u6yKIK9zLch2aIs0iCzR+Uuw61K191ROUO2xfEPc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.1e73da49.0_1585171798629_0.6123119100401382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-ripple":"0.15.0-canary.bb6dfc5a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-MY+g24eDH49n1xZ6lehBqaIUP3rPj2XSrIZzsFQtE58rmeHVQfYs9j4s85ZwiGhNCgl5XksBJtM4UcRVMJ0/HQ==","shasum":"503125589bf6ec57bc56479316a1849bd937c293","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVV5CRA9TVsSAnZWagAALs4P/2bK/YsbDCX81NVtd2va\nkD0iUA7zpukcNq2mAl/lhkpeXpZA+gd41OGrjtS0M3hvo1EUKDhjgEP6bWyU\nCKkwygzT6zBcDOKjV4dBJTY1+imacS6gv+RD5hj560b9kd2gvu+ekZDSAPOl\n//7Im6ml766WQe3cz5S+hSGv/OjJ08ztHZskGS3s4I5ArwGiyq7cRdOOw4eH\niSTkdnbu4Yt9vR5f/nce0CPddAvGS8pBxe1A9iMk+FDwuvvIu9VELVoL9AQF\nJGZqTUCDA3pCy8ogfMjDuaODdRQ2p7tmSbxzPUzgFDZu7f6dQWAZniFkKSV7\nWZhodRXxtjCRjTuE0kGJGAGM+EmSLxTJ/+tRIelCrIXjjNqSXGU0HNVtJcs6\n8CZcXzqaafUaW0yMb5W3RVG8mrGejmzpowiOkOtuIqG/gHXgYKWiYxFzc46F\naQu0YKYQOt06k+sE/8W2BVqqpn4iA8czztFid9u6lhR2QVQEgf6nh6jbLndJ\nx/GLGqBzNuYCKS7isfiDjKkO9rVzTM/DsisqakdVBSrKFFPQ3E552t9sL/si\nAzVT69z+ToCkenzHGa33+EOFa4agMWwEZn4egLiObPZsxE1wzUnsDL+ICxZo\nXIB55X2E9w0lQ9uJWCl3c4DNTZI267CK8ED5ggHAFpcNnsX+EiSmCDiwX7q2\nDIT6\r\n=xsPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCympWvkhImPZQPYYvBshqfuwxWKZMXifjQhjNJ12VrmAIhAPeLeRsaNQJ1hQVCOmEaV1ZezJn4oHybZzuorvCRCP/0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.bb6dfc5a.0_1585272184603_0.9772846645739288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-ripple":"0.15.0-canary.1884603d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VPqoFRzz1qm+OvzZCovD4FjFCcgCbirvsVrjq1lusn65djotnAF4MpmUkygS/cRcfB/ptMF7tu5mTWTYCxXozg==","shasum":"c5be6ea2f2b0c4a72d2af906b092fc5283fe4088","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloyCRA9TVsSAnZWagAA9hMP/j/ezKr/+ChbZxgC3QEa\nievKCs+2ec5XZ59z9KrW2vXr08jWoGA7SbbQCVMt2mDKlr8pgeosRUD6zHBZ\nTnku9SQ6IBG/ziqtJCVde5voiOjMbCUK7+UYlh88XCsxy8VePz0fMS+eB5be\nVlqFcMsJ4KyuH3etJ8WkqDp6or7fGV8XHCuJZKXZ3uYvRkcM52LTJZabLj4y\naZAqtGtJpP+BDpnrO/h7luLjUuind7/ugWPgEGvjpCAyCa4Hi4w5vCga/U3z\nsrBV/50m/UGr0vXnBNPoTm4JLlve00RYK0EIjafLwzw9Uwa/GGMXdsRbul3z\ne6vg0XEL+ORqf0J4XvkWMMj35DfQ4KdnKqolPuTPtp3Aczd7GYy/ZySSHX3K\nG0u7deJZ9o+wnW1enksch06d4M9H+kPdTQx1eO1fG6WBncViBSvdYEBsbcpm\nqQommAbfg4fe4QaYb2LuJXhzonil3q4FZf4xEF4w73CZ/nV5kbfPedKkG1X0\nLQ/0/64zc0A0rzcHvJqDhB+8535nQFMVwtQdX0XUAmeJtlEHEHVvi1MVt27x\narnUlvan5Ok0fiVxFGd4X8a2CbtJLSG3UvCnrPDwMb652bFd9dkcp1asOtes\n/orrwpCiabmZGALtPC9cIKIW9ljg0UM4T2ZH8YED8QcqBxQWUCuKftgCyUaD\nCUo2\r\n=XRUS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsL99ZerPFDVBvrPAH7Xiz7/2ingyKDfDVfI84y1krsAiBAE90sq67QkKTE+PyN0WaWtaWp3rQ00T0PlX8eCVfEUA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.1884603d.0_1585338929669_0.7738225252208937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-ripple":"0.15.0-canary.aff73cab.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dUr4r5XgtB7489mAiHQsitVc54i2xsadCzZVs11TR82gPYDCe0gq0pQxIMIk7cJd0oR73iWCVw9DIsoiABexIw==","shasum":"0ec6e37f6af82cde51203a60de682be091235d36","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyvCRA9TVsSAnZWagAAX08P/jb7LqIcxqL+MjOrZoAL\nyLMjcDbHDGUHtrv9mhQFUyOG9ntKtQT166llAhD1uJopDwTqQLk8ce5dsjGO\njdFNXHVwcSwVdgNCPdjMiRFC7ArG993bLEr8j2LJ4BJB0tGITVBi07uAP+r4\neLtSv8tmdfmVZKTEoc/Su7aL3Wd2kjslUMH+Hz30ejfdkkYBFYT/NGPsnO4P\n3Ja1i5rKk6IjdaNpebO7Sq/Ie4BdoZpQgvBuGa9ZrZRHgQ3Th7V3+o4X1FuJ\nEh9eB0P1ioOCqwjW8+P/6EVOvyS3/rZo092EabPYyvVxf6dDghSHIWe2sWKh\n7TxiVNxqMDo3+Z1AsWBbtGP67pzwWDLOc54nRu+jYTF39ZKNdq6xF1bM4Dan\n8eTS2+iXxZMTs4zNKMBPMEEQNcjKmKnH+1khjoM6aHCFHXBaAByNcZwh0iw4\n7Xe5aWRZz7ZozF9/Fwj3y6pYv+o3RSz4c2biHD0gyRfLBNy7eDUy7XMr4iEO\nWjqkjyQ6etTEFcFPCNuirMvMJyk93ZqOPy6bmTORArEx19zraqRIvpRtRh5x\nqCMgtKW9uxX/Ym5caOa25C7HwQ2iPKv1BNaCl/dA1YWEQRZWC7Z15nKy++Bl\nC+jTZ8gmBawnNE4cPG6LeOOkrMSWlhSbctP9wRInWtb/5SoP6NabjcmApshu\nqmOX\r\n=wbA3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD21sq4q7bopYQB+62lJWOnIzUmEhx/rY3rlQ51QPeC9AIhAKvpPnN17b04MEfoiqPjsY4Z+oOMVE96RZIyBjQEFRy/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.aff73cab.0_1585343662289_0.2219753091809693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-ripple":"0.15.0-canary.63168f61.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ER09+pM/gu1Qcti04ti+B07g3B5j+j9M7UmRabJ4iHtmAeJL3N06+SFa4UdiW1mq21LCtmzMBGZhu+lDusfpaQ==","shasum":"63d7cc709d92ad3e691ea0b5a771d54ad2fe44e1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gQCRA9TVsSAnZWagAAX2sP/RpK8sDYpDdzG37oyanZ\nv25AhiVocw668WQhopmUFRYwgktR/gyUi5VBTui1zGW4Z4/QrZoSqgs+HMRk\npP6SWHwsaZ4s1UHWbtJP2Zz91MkvlIe5jxDIp/DxcKSDwVjkaMugl9FL2d/c\nriNELZ6E1wtHPZ5XRmHSN2fORCMFVqsA/WlJEODGaKvghHFU5m5/rWX64qgx\njun7rjrjuMVX4FYqJReejOlA2BAzG4lUqzlAz1/+NX3vIw4gvpFN1GUxodjS\nbxB4RICSwIiyB8LTrGwZHu0GPl6im+iLeYqCebRHc3iWaxcIfIjQyK/ap/cx\nUvB6OHKpMvnRzpkpwYk3VlcFpWqNJLidvY93BH4OtSrMpg/1NuZ+8+GQ1fx1\ne5EppYMw0fb7R69YZ1g8vp4akOIaOuX3TENZzrQfTzF5TfmNeTX1onqYf2zT\n47OEjKZ9+bBH8IUOIhC8HOgTCAGIkI7dbW3hs94ru3WYTtSXxIjF11HhdinN\nmAgM0Bh4Jjjx9etMH3sjFf2hJzDCI4OaiToTjgRfLRjNJv0vNmTnUXYpQwvM\njfCSowVmzR/7ehn0cRP8AwDsBtHIvFpA/2RmFdsGORuiiuyS5BV3RPtYzg6l\nC2nv/rSRQYHonmjIc71A+LgpMlbKClYToLZXP77te0KDPf29797zLwzUeAUn\nz6yh\r\n=FyVD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDO2xIyoc0vko5phRleOmo3ElxTWWZ3NyQQS/+TrdkIqwIfalpFA+9dHB0MU1wZ8V/iH+mQelaU87HIwSTih0DhIw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.63168f61.0_1585678351915_0.35239534024779307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-ripple":"0.15.0-canary.9fb79b3e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Up+CWH64u2lKD5D+hzeBjuzHXEXmQjTBF4/ja3XFP03oIfNqYqwEOh7P0nTAwpZ2/VOSrRUp37OM/84GOLLSHQ==","shasum":"44854fc3f06ab6a3814ff1deced7798b3b88a3a8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QRCRA9TVsSAnZWagAApd4P/1HXBk2QQcYQgue0N5v/\n+xMu0NT+V+1AQACBSasm1XncSBayyDoK2eMctJeIdmTT0cn1mb3PfKFI/w+n\n+R3tZZ+Q1FOJIIuq/Zr3Qpl+9uvIa/aBJIWRD2Wa4ejlioeazLgJ04IGI3le\nptbgrIWzTbitYvIdP8DJbIEZCqCTt2NRGpV9nMv4nzUw1JsMe3QX+uk9cLb6\nED+pQjfUpiaq535A+CPJJMsws7ObQ0FV81tFSOJRo2ilMN3bEbOlp6VQHMkv\nENdKD6Y+uV5vcpXVfZPgnax93Rx4r90hKvs6b/sLmAIBiVs6F0zzaBA3dWnX\nCGHjeVOaCUL9JDQo+MIB0Kx/gVjdNRpJrgfUIBDG1XOI9bnLHdN7sn8vf5o2\nq7cdp3cw4KticVa45EPGNkWUQEbPBlkvQDl4OpdzrOYbH+u7LlkjkFLlVeY2\ncbEaEJlINFpd8QZDZ9GBWcMIW8Rbss/34acxHnaXQKZjdnTszyYKwrugQpt2\n/4OIg9eFAQx2lwSq7fz92UIhk4EJDhiVhEbK8lQKOQ9OznTnczfYmCf+QyHO\nCeZfAFufamJCtUDTOrLXPe/wO14x8/y015iScn4K3updZLWFj5ntXKrb3F0C\n/fNFCE1exD6TahpZ6BQX6tZjT/BA9kMtczBIJDnHRGdIqL2Q8o3JGSwfzehP\n4ZZU\r\n=kxUo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHgKYrL+7tOwkJ61cSnu6L6yj6wUYaaBmBucroITNCFgIgPvKcCXpCf3PWfBgjP6UAIh0ojhUlUPKQIQhexSbFmyA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.9fb79b3e.0_1585689616938_0.6799781794510937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-ripple":"0.15.0-canary.9bd3e9e2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FqPlN8/trgQjzablhib6eT2nD62gk/XxS7hQCV5Stae2uAhJiG2BZNekGRFvfnTiERti/fb932c34yVV5mm3Tg==","shasum":"8b6a1619ef7d8f378667f0c4da1ebd89365d05ac","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg900CRA9TVsSAnZWagAAMwwQAIJL7r+o/FyECNvLj4i+\nlkIvxpEKozYyCVPU7Be2tDCt/LjCvL3jYBYP1rUm/uo4QGzNccCCvCoLvYyf\nffB2cBF9pRXrPO0imek0twHOmZWcv/APr6ZdEA3UqP4TtBfEGonsFE3UnrQH\nzjs4Fd0ZPtlyM16OfjnLTf/x+EAPTTbJMkzi2Ez+NDNvR1Dzuh2LJsDyH11M\nh44Eo08HIioj+F6EiHQi34sQgYgZa4NKRfe4QFcMhReH2B8IDLFG3I/ay/Hn\n5KSgOZimy+hcnD7gXLIK8vwSXOACj6VeDjrxwFw5OKtxwcFDinRTIm5U8m1z\n2Q6wcTK5MdFjurXQDrBE26HsglN7HwmYwkavgOI47vsKKJO+tcam31iwJyyv\n/i8i5aVGa9eMbnrs0t8cGDxgsJ5RCgB0sCoMxsa7Cc8rEOpFGgMVgA3+oDkG\n4RFR3OlyTV8V+GxGstrDxAgnj20f1glzGbmILxiY8aCDRlust39dmfM5uGlE\nVU+vTdPd7tIfn4GbdfQFUIg5MU8j2EDYojkYr3ThOIacXQ7xNO6XjC4lEdds\nccr/kYHFxpWkJZuHIGTsI8NKLhqSHRm3kLU7okgTWMObqpZf4XaSUBlWdyRh\nOPL162GzN+KfnX/0spdxo540nbNH32S2BYsFWhRBA7ckpqe9C8/ycYJoAgNl\nA4Le\r\n=67LS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdmqwt8+0GBcbbcqlwxrJz9RRyZWZUe33wFRAr2teVtgIhAKlO1hE9hPYJzwDslUFZs1gCtbfpWhd4XZJtUKfdzA0G"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.9bd3e9e2.0_1585700147651_0.9868396986383476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-ripple":"0.15.0-canary.072084ab.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ik4K0XaiH6Tp2oD3AFiSPryv0jyxLAzDZRXFEDSCh2eIiKtW33YQE9gYggwPFh2p4irG0J6+3+9e4L47YMoXiQ==","shasum":"ecb894e5e136d81adc619a6bd4655831370f12f2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":95164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/0CRA9TVsSAnZWagAACwoP/3bnelBjEXLRP+9ROusG\nf16k/NsI5t54qnqOk1nm9wPcMNZELElS2bmm+pDFmgkMDvzd2vcYdo5ir66F\nYVLKYX2oefMUuK1S8aRpPl1vwh2ipdgsz0tNnENkDdnXapbeSbu8dFaGWyyY\nVTx0U3G2UP2NrrZWeYDEShyB8OqwTPpZlm/LD3GYF9y7Z3h2/3goddjgLYqA\nEy9wjyBA+xosjlOYn9Stam9TfDxkkAYmlR9DUNh18gh7TYyTkRUbNjX798x8\nuqbJ4ATjk/oilKw9TjjQoeL3aafsUx4R/9lDeOsO1fBBMt0cklHGcftQYKPG\ntEtOxjgEOsHaBF4GkmnJxyPLpheqeUxVPz09tlWkTrayXlPLf3YqRynSvuWX\nVB9yVzGIBxFtwJOWMmjVTcNN5In2lSzEoZ2nKZa/+EQkPDHMMUFQkqWRlSkb\n+1Kab2Xk2LdnOtbaHa1IIxU/u7kdlDBhp44Ao5jgCM/38nLM+jA0ZaxHG+9f\nN3aQUkeEe2bmtizgbxBm+cEjH7dswV/JL502XXqYydHKyfk/JyVOCJDW18Gm\nvZtObf1/SrMRvHJh0uteaD85cDpOtkw7ZkmAfSExZ3/ulRNniobY8/+bGbJC\nFR+1NYXXYJcBQRv87K3AblECES7iUe/sMtcqVskYiblM4h9aRazxmcVzjRjx\n5cpz\r\n=wEU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkPXfqx6biYmu0N2Y2sypz7wQWCiJizirRHvxJBZrE5AiAj+jA4bS7wbm/fRqqTZnyOElyZsc47ZaxmwvfAYz9rfw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.072084ab.0_1585766388492_0.674696225781918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-ripple":"0.15.0-canary.4dec04af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pPfU9ttPSHOQSthpgqjIk0vn3x04iBDwYRrsV0VBPJjY0y8d2lDB+RwzNmStYiKUS0Gn8zG3jI6i1dkRbCrZYQ==","shasum":"d2d519f2e0fdc4faa1c826b9dd6f774d8657863f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":95164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y5CRA9TVsSAnZWagAATRAP/R/WI+p3gm413IIXALIs\nyiaVQC+GlpoxPRZFQgbKDiRzyHEYKW6maNn9vxDjTmAm3rqPL/snBav9qv9d\nekBi2U1CqmcDkhsoFI4AcPB+StRhNmwytAh68+NvC5W/Niogn6LPxY6E+Efd\nyERQFl4h54C5MnF8eYcO1k3dby7WVB64JSTroG5gXFAkwRngJTdspJXXxhg0\nssy/r817vK8dqQ6zKWWYooczWKql9zq1oxwjSXYcpEVvfkW4adkl/8zeDH6A\nKwT0X3otTER4QN7kWCtPCYjLo5OmLlOq6fOAPbihccmdXK4l7FS8DwPZUvmK\n1QWRQvGXHlJ8V/YYXMT8npKkhD0u3ma00WcqdgVCNvWjKehYBltyTneJCRJ4\nvig0vGgxdfsFJdHh6PFEvOWgvygG49zmjpjiSSnoQFeh0/AIKOelg2VkCWs4\nP+ETje66mgSK1nWx60+wi4o/SiEAUGTJHQPsrGv+u6a4x3S9yYZzDIGmlWC9\n2FfO6VgfZIeYLDmZzN+rjl0/V0VmsMHLsG7iD8/dnl9zfoDCKK0Drs7VmShu\nvEDscdr8das3oNnzF1PDe+4+a7UxPUA5dDX9UW7Q7OJi5LDsDQKK/EswskHT\nyQLRRnmnZas+uYZiG1x0TFa7zoPueifj8rUBelwRaqCL+jGqulyIHJVbJfGU\ntcz6\r\n=cjSL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhBzOkD8L+6tNfbCc8djFwxYkRHATF2cAIlg/tkuW88AiBslqgMNbYFB5Qsz9seJB0qgzeTBwsUMrFqIeXdqChCiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.4dec04af.0_1585945785395_0.9596520120616285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-ripple":"0.15.0-canary.9b676354.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-IwohUzteKgWtMRTOnw51WVQ9gzi10Or2PYkoESBHCU3nUi1eQw6G1wEjPsjErjb9/lQ4Pc4AzJeJ3AihqjCtFQ==","shasum":"6d2856d3b20124a951cba247539890d8b3fbd1d2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":95164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zPCRA9TVsSAnZWagAAa5oP/1qEatqz0XsR1o8kc0zh\nlWQERioWbKObxZesOXY99d0PhPId3oIpKDIvIsuTbUuy2c4UAYiaAZupL6fx\nx68RfgTHrENSUAI4I72W/HHjE8rG+BtEmCUenFvA01ATVAoRaWvJwGlzVJkq\nO/EBa0Xcyjf+evwPyDRcP42+KGzAb3P/bUwYW7BryQu5Dvv/+gUxacbUnoOu\nC9T8GYgKoyumLsZXguqQaoF+G7dTUSD0vBp0WcV3QihTm6j8sKsTft4vpt50\nBi/l2d4hHE3zsjVB5DTg+0OFa3bYz9mwvDRwEtgQRIPjW4sjzFEPXWQAB3uv\nPUZ8sPn5pzmXeLxKs5VsmzEn5qHhxufGIIFnuNNGOvIjLYWD0hqN96Oa1PvD\nAZCKPqciytxJ0hT83lXvnmRm6EP1EhHi51fy0Ag3C7sauwTM1RGZP/4sZQjD\nU1y4BLi2ibbz6CWEbjaCZH3OcXYIqIa4zH8jxXacUvUGmirkK2V4cwPWFeF9\n27GVjfT7vC1gIZww/ZFgrH67BCWEDGGZOSak5r+jISwCp7tDb3htWkx6dd8T\nJDADIFCdPdNlw0tZz4/XiUPZLotrm7yFF1gPB5gD0cgMpmgo7nZB1P2tR2Ds\ntVuWPMLGgdmuRZd6leDhD1jMuweUiz2qzTgi5yEUnl0GOKi/8jOaPNTzg3x3\n5WsS\r\n=IxPP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyDKr9Mc+J+myVtVR7iM8TkdESMO8VH9riQpFt0J/d7QIgUszLr87eHiUL2zv9QESW+JQfrQzvz7mPXlrmjyxjiX0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.9b676354.0_1585945806538_0.8173126271798481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-ripple":"0.15.0-canary.6b946095.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AlwLxp+n+/w2p5GUjD56Z0VezNlrYVCEWfK3wJkOfHuPAVUz4dCQ2+gOhYo5kSk2gS0VgIwFuqXfRzijloOodA==","shasum":"ee4032e6cc1ef834f79e958d71e3ec4f7beb61eb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":95164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6l8CRA9TVsSAnZWagAA/6oQAJgHdCwHBHgqoSoW8BOb\nPTEMjrR3KWcZL7tdS6ul6q0RcOJrDKN4HyKUKpaphrXc5gThWuwahNkS/5wE\n2gBpf2BIIxG1HDBaDArDTU/Ki4N75Ge+p2epVv9S6VGDJq0ok20yKsT4CH+Y\nNvMVxrxn+3cIJ46n0SkQP0abI8e7Vz2QJ+9SHGrwsGX/7NiCFvk/GImdGAfA\n6j1kzZnBWjNj2kgs7jtDWOEDRbbBWgu8OJB5378EGLIIsQlEsypWhbb93ci3\neAuYUXam011U+7SD34/JCj8gKHEjWs94qd/FcpKa33IkNifI4SOXydF1DHWG\n8JMMrxQ+pznAlne1uiQE5rh31LGox90v1lrLZDlAa0yEbi/4Cmm0dP9bF8sZ\nclz20/Qmf08DpLt41tLBV3DyEc1ePF+glFiaJ1Chy/g8fekmRZ8/stYvGlWs\n43BDB6b5YIw57tLL7A3T1IO/8Ie7ci8P7BpdOxs1VPygw2eQvcQmzhJbS/+c\nPCllFSrz75nsRmUGSUVPoy6sfGt3I2ZLHaZ89pqe+COMcqIESWZTBFDjUaQ9\n8TwUwMMVGqXlElmjDFprULGpQh0qmaVOV6/9/4TvwI+SJUiBaS8ZFAkixykH\nIPIasKC47Hw6aoAw7VkQNgClGZNcQQ079nWhDdd02fALRg2MiUJ5+kkDWL1k\nUGfx\r\n=EtcU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbRl4Fi0fvFaCICYkX/CwzZMXAjJ6+PsaK72MUAIXd+wIhAOD2Z8XCG/hiy+SfwB1N1I+2cVUqpBUXh4F51oIixkAx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.6b946095.0_1585949052027_0.44005140540873366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-ripple":"0.15.0-canary.5ccbfaa2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xpGI6BxGbpR2KdiXhrldYP05uBbPSC0/D0Vvx4J/kgpxSNF1UAl5EH3zTbS9F3gAzCfHqaq9qN5RnmgHW6jYVw==","shasum":"eba9bbdcb6606e542a1228fedc893a4ec0849c33","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rHCRA9TVsSAnZWagAAsOoQAJ2AnrR9ZJcXiTHs+1he\nYaTDyeE69X3cbub8B2wiIZ90eLJ0NasC185igxGkp8t0YvgdvFVd2k4a8YJK\n/LMKdBFcz2d5J8UTT+X1wxVVt/7NtzCddhkPyiSFbqUYkdt8eF/rtYWu65eb\nwYReZFpBSgKoZb6FwHsC+xgmYhU4OhdFOk4ylsRMYiAWWZCJeUkFhraJDYtK\nnfuo9SafvwjvSNF8XlK8vtBjLJjmBKwvRmgZTni/E1uLtqoyBXWrMoeYVoOA\nfd+fnXSKQ4e9EhCKiYnHtnw6jGLLT4W+sWcUpMMhLVpQnSWm8FTblWwjtohk\nb14UiKs05pqbfFD/mFFiexWJfuEp+e53cZvZL/Gvaz/TkDNON9Ykq9sEiFuV\nJax8WXGXA5fXfk2AY3+z9LebD4FxZGLnJzumAJc0LAX3NGBjQWw9+QbA4cXC\nINplyPTrZrpu9nQzJ5xhl1QdkLTz4MZMc6vP7+f9wPRqUvhp1nSCvgCVOA8x\nEQkEveNfpk41l2s1mx3DlyRwFp5q6EQfO6mS1gZRX2TccA21aBb5VUrvbkAo\n2xw/+t7SzGG6l3a8w38Z66T1K6z/LYzf6ePntjjDM5issQWQHm4S9ywpUmWC\nuWKzCiZiUKcoJ6nildlq2tTEHJfQFe49wtLS+JQ4sFTduL/XX6nWqkyPFC2i\nctwt\r\n=mdEA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHW5KjI0s17dz8+qF/0fgLIBzCcuKI+GDAFb+yG2SjXAIhAIplilD4Js4dhEbrFYIXpS+I88NMSbYXdxewe9rjUam4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.5ccbfaa2.0_1585949382723_0.936589020485264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-ripple":"0.15.0-canary.a0ab8772.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wAX09byKGuh9PcnAdGxdWleM0jbFlQjxcCMsKgCKZdd0aheKNr5liBgpkqweKCXCKapB9JcCHul3vRHBpvcPNA==","shasum":"e5574ed1b8aabc99fa66556b5752d05c46d60b4d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3VCRA9TVsSAnZWagAAgOEP+QBxP4uddhR5IboGij2L\nNwe0+A7VB88bU9A4UDmt3TNpJIy9zjqTg2gMcxXvcZN3/roLNrHv8/WO4fyn\n6ziyi4IwLeCXayaPoyg3o5eAodliRP6XuASzFpiwCbML3Nq7Ed4uLRduGszN\nXikk3PcxBJBwpfuB5Qz8+SbzJ/2snb+1DN90JeAh7TDHukPFj+oBdiX671mD\nCsV4kATp5TIAJLcb2N6Sxvtc/3SzMkkt7V1MtqDSZPzyFUEZ9BoSOmtYwR/6\nkmVyLlQI2QNTtfkV3gAWk2VfxOITFuD7vAiTr2FBW72K9+nDf1zgzbnXAxO/\nP4fBhMB2PFjJXOvZ6yZOmFyqxweAldHZs1vJ9caaY8Z2VMFQc+qDT57UcLd0\nEyiaZ3EHCwRFvCqd1DubGJzVyWscq3vVEExeVNBnjDQdg/GqM0G5eSOFGpPS\n5HVA3AHOOg/mjIaLWAa1f1tUvpoouhx/JD8jNXvvKofZrMu0kBAqC+frAzP5\n8reT4s8eAfEBDl0Vc6bqJy5vFq9kmgrdYqubECh0gIh7Hm6x85Kj1h/9SpSP\nQKYEDYiNl8WZf3KpgaMhvubpUwAfwgBw/c4bcLbA1Jiyk6ZWZjxTO80oBNsj\n7+WBPUk7uKJrHJaCVZHsrUOGLmOyAYQengGpQxjn3CNBIcZU2Nh5TiIFR+dr\nmGST\r\n=u7mm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDdMx3Uw1FUyZTortVLOZb41FT4p65SzmQZBy/lbSXyQIhAL+0/eOnoPmnGsFJQOAcydTE16kj0CwD1Qdyk0fwjenE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.a0ab8772.0_1586290133286_0.17142745609134535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-ripple":"0.15.0-canary.8d352305.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-K4dLUhCFQ2+dJ8iaVve43Q5/Cl8wHm7Jf/1PLxrlu3IyZQ3AVDy+snq/6gCG0+rsUZD1/0jFT2nH4LOYbQaiMg==","shasum":"6a798ba0cb3cff0ad45d7a238d85465cbb9b87f8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOsCRA9TVsSAnZWagAAr1QP/0SNR13W+cj2tSgvutpO\n9h85n1CpKN5g3MIX3yXHHH90AKLb9NL7lw3WPsyxNDnF/7udSBJTp/gaspzD\nja1Q2sExSSEPNyIO75DHSGU0IiKkmf4nc6dO5dm41vGKYuWpwFUATXp34djA\nSRZxyJCwgytLrB01OBhVdokx6XzYJdRtkazlbgwcsHZQ6hh21xGdOu4Ckjsz\nF8872Wws7AWRmocl9OqOQbA8TTltPV8NF7Jxhbl6xAwXqWxp5TrioMC5pyBv\nJ+aWfBZ1kfNvhHhoyDjikF0zu4ivUeVwgWr9aq1xq6SjYUCPMgPUGMGTJE8Y\nOOobm5zNJXtEQAq6okvD3+m8CLCekXC4jfCuBYutr/Q/q43I9cYc4vCTZFnF\n7VuWo1P0XGVsXNKELmj1g+EQzwK8F2wLP32BPYVu9ZWvSsxO3lVr4CRL/PYD\nWRLbnvpY9dNYKfB/GADSRPXRycdqqbfGuNAX4lcn9R+ef1Ch6JzjhoETjVgA\nQ4TNVh/ZPb0GS8fJB50Cfym8T/NLppvrEfuiDBLuSFcQvK1PB+b4Uxag+AO7\nm27ILJLma7uTWnxbEU6eYn9r8iqSMgSira94zeLEiM99HtOZxtprWM4j0JJl\nO3eVJIGYtwwnceRH2wYmUe29z0vOlI8h7lTArqNjJI20+TiFMttWlSM9s8p+\njNw3\r\n=2y9k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhtUwIUSKVYF7uUnj+ySgQKiBg5Mmsaw3xqXC3geBnxAiAhXYvdwIs3wRXAmth4oN5D4hgvMHoyp5jtLSCBcSCawQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.8d352305.0_1586295724451_0.8757526800873043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-ripple":"0.15.0-canary.31eac79f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eNQyXuE+GBrKxvoiM9Dr+WmjAbA7d65Ta3KZ4jaBQA9jy9XS9ZjWrLwmjiRjc9bTH5iNqZQf3AHBGaVfD7ULOw==","shasum":"722d957442d8e65486c28d02ea917531def3636a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":95166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdICRA9TVsSAnZWagAAO5EP/1SpQeXhOgJd4PaZzWQU\neGlbrgRcz9uQMBCMsQpVlpSJ+B61778Sr4/3Vs13euclh4CXPlC0oXTvudtn\nTpr3Qf5bv//qPgi4JgjWqZVoIKpp+5nj8NU1yKZYh2nMyRWYZg6qwmeas747\nTVBpTTOJpp2EqVCpI9YGpR5a9cH8w1axmaT3CUZzdPfBxW1PWDJDhbAS/geB\nFAlYnzTqIYtCCowDljQUdIFXPxLFVIr/qFqa3Dy+8BZ7tyBF95m3sYFlbTNK\nMKUGVNt9yTSUCMVOZioBMFZ5M4UoDQ7uDb1OL6qg/k12+mteXjIGLD67UhnA\nX7nWYggnu+5Wr2YViCRT9yahzMr8FFE+MNnbGwGwh+eE7mF8IzT3dBqAcmcd\nSUpMtmSjVUZDsOaaM3/jRl+VEIAhjyCF6+JHdbXlqZO6RvtfycOjEQ0aJdcf\nh354R5gcueFzP9x4QVeFQEn8ZADksAvI1OKtsewA09lTaAEf8tJHrdUWTrN8\n/WhQHWWbJlXkn4yZrXfTrkN/yun3W/4GrgkOtpEkhWeLXlqx8ViqScYW6/Ye\nq9IVvxzRe5m+WxA0rvkFFWYmAhaf/H+qzTlO0NUEPltRzHnw23vetxLf7+xg\nd96NucQ2oZm61Hkve/NNrBjocGlT2YHz+TyNa5jX9Mpxf6Fdj9jOQVHTIL/f\nltpS\r\n=XZZd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ/yI0f41EyBG5CMw9MDMM5kIzXuThUr8npq1XO7wFxgIgC51NMOiUFPA19euQy5o0MX1VfFhjP+/yNQAUK2Ub6wY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.31eac79f.0_1586296648376_0.5853412554168309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-ripple":"0.15.0-canary.ba05565e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-UzePalEu/o7Xpb/0ZjSmWPX2IpjifkQOsGQZFPg/hGSFYn8eoS3gpq/0vT1c9gPSY3RjnbU7q4atozPStDpyfA==","shasum":"4ce15cd03136fe485101604e924e5ae065fe778c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqyCRA9TVsSAnZWagAAluEQAJ2ko8dulsv2IpGf1sCM\n+5hiFscuuxc8Lr1GztdW77aHpZdTT92eFiUvHkRHqmXqdE0XJsCnhgCUio25\nlwmd+7CCeA5CTLwriJdFJTnwBn2aE00ltPxNQ/lz58PTUajyf19DcY8bEUW6\nrN6HwrkMPKkPE68BZPzYgWMEBUZnQTHcnBP8eW4PVyBlURtVd+iBQDsqx4OA\noT4FPe9lai4jdsmcLfQ8l2Jz1cD5uxZRhSEG+2Eq9o2wfc8PeBcMh4LvFX5c\n8DB1qswis5fg80rvmHeDKhW47Z9qt+qBzJ2Erz3NFx4+ubwOWlfz5aWXkyjt\nlPPJjiNuwEJdTRhV5uhAoDQ5jzVYd33Bii33ic2hTgcn4Ny+EMpRpiBZ22Kw\nhg25sh0nRO80NqZSMSOwxaChDLViv5x9UElqOFRmXBoCqtQ+c3abLPIDGcoG\n7pYRGacd5hdhmD07hwOf1DhjffuZpjTLyUGRbmnopf+cW/CCPIGriQSNteOP\nx/MQTJWCEzHumTsIrnn5bzo3RF0hwaj3G81DMWvhS7FpDsyq0vdrZNIriULV\neDFA/7yHFta5TMnjnxVd/WqcYzGbTeRjXaVwWApySD2kHCwfbD8gHRhcAlSP\n/beaxG23iWTNy/EQOM/knWRnD4vcU4eqawj4rr8Th7co3SjCa1FeL33NrAVX\nfnH7\r\n=QWAk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAX/6lD+qYwESbfavQoC42ykgzbvBAvVyQ45h3mns9MwAiA1jZ4fo8LqY1yAya2cMVtSicwgcKZpLyCCR8w9EWsUGw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.ba05565e.0_1586367154225_0.1565370159947006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-ripple":"0.15.0-canary.25099f79.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-QQFyaZvKomkioX01sBmYY2jI8DVtL57U4gBcT5j9nb0D/vn8eQaP2E62nIF2F12ad29my+8vUsiMGQkJRPTA1w==","shasum":"e39814f373d5c909ec3188b7aa63d32dd122a5f5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKECRA9TVsSAnZWagAA29QP/j/hgGJajUQ1/6DhtFmO\nyWFDXP4EFvOk6k0aHKvZ16rKZgoH4cK8SAb9/1Hwhyeobc6MU0Q2K2+C2kF7\n4LuTGzUOKFXJP2KcVj2qWC1/tBR8N6ESBHIhvIYaGZrPm7RWGAO1nIG+Kp47\nQtvQ3L2/ZcXLPZlLZjA3s2QMTB5YMEBxi9bWFiS7sqk1iUAiHL7OvHKKT1EN\naN1C/A3KeGZpOl74wn9fNAQqdqxtmvGPgi2FZUd9MiYDNqBoK+x86Ntc2UVw\nuT7b0qpmxL1DjX77o5iICqP4vQTl3epraJQdVHJ33/RKskn2anbYhvg0OgWR\n1N4ljPdj0q2Kk1XzptpUEWSn+8OwJVLJ4gVCW+XFG9jumBjEyJyLbhrolE0J\nxoUdI+RPhxLz+tYvojdFWvl2HdYg0++8UGa8rCqqLQvaTxqWJgIyM68n/LRA\nTsIJHzxkQ4+b8nVckIXc9Uc8k2eBWstCcXoQJKgCVsRpKM/bCnmS5/PJr9dv\nkt+WdTxwQdCldlK98GUm0eoprEtfaNlvCe7cuIqiSfpjRhafsgY8rDvTJmOf\nv9cGtQj1FAEXEkdqCe2UBrnstH2od48cMKe/iKPn3LlUlfSilam3UeH4n9Ct\nKrRbvwA5kD7jjmlQVZzUIzMkV9r6pTaWS1H30fucprA0F5MY4J7pyldGzAsW\n7Id2\r\n=JQ0B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH46pYVqtJU4Br4ln4gHYWqdVJa0oomZXwAptrzHVCNwIgIGTfG0VumQ5P+UtJEZ4Zv0DHbtDtnhO/eHIsDVtOdJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.25099f79.0_1586381443823_0.9998092342962592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-ripple":"0.15.0-canary.447e31c6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-c5dqAe63ck90ZfL6KFXADwHEFdnQjUFMkl9en/kEFjTP8RSEozT/cMShpQ6tVVAU0qAOaT+y7N+pyIo6x/m/iQ==","shasum":"40b542aeea638adaa9debeaed5ddc4ea0ec37712","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndxCRA9TVsSAnZWagAAViwP/jspdba5iDtdHGcOjjMN\neAjmwOPTi/GjSMfU1x8TVDIGuSdbvPcD4zdS0XqMqIfNMaEbOWkzSRNnQ7SY\nobP+g8AXb8Ikz/jQthZKunV833Pool1uVK562hY82wAot5f3yQlC06mYzfar\npIaPImPbbJIgFWv04CnBJKEsH9vDBnJaKZmQHzRc550KhgWUKQlicVGvtRWV\nRdB2hxUdNAIQ+J3k7TqNZGX2b5Cm8FECh/fD3He39GKwTw3/WjoTYgK0Hkie\n6S50zAUFDHur4YlVw/l1SgjAdBIzd8SazfhRcXbp+Zw4S+E6dSpuZx0NC6jY\nbO6LqttWzxDzG+80jROqsjntgZ8sSdiCd8b2dGtZ78vu5EYV3pIBHob0D9/y\n+eRCZ4DmWzvbrf1JUYcw88VS/OuOGAFcymffInTAo/8uXCm0O2iXMcuDLWLi\nn6cOwSJVSZii6Gl4FX4q2g4egBC8K9984NoCklxY5BRUof+bdxes0yjozu3W\nbduPjyyK319kJor1Err2/D2cz6Y6unLnc95fgWOsTmLPXGtppVh2pXJjW27U\n3d7Uacgz1wb9aPD+aECMxFOupDDEp+vkW3dFW7GUYkHvwz5yvznNe6goRhD9\ngB4PFUXjmxJvJcnfKkSTSvNtZROgD5g2NPswLpzRWUM/561LDW4VXuEYQtXh\nv8Fn\r\n=VYol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLBVzOsrYrU64FGsICQ4J6EUewy3PCa1/beljHfJKQWQIhAP98FajqV2urNp8xfvIhgoGE34ptY1x2vTD47JL7z1Hg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.447e31c6.0_1586394993432_0.8160701783195439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-ripple":"0.15.0-canary.d6dd84f7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-PgbxMypUz83LqxaPeInwXNt9lYFuHf9wVdSM7M8YA45ovKDpeH2FngobjCJwwdwjs+eZjaauoeyoZOTycCpcaw==","shasum":"795c4f91dd109b3bb181d7182568320256184f24","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnl4CRA9TVsSAnZWagAArrkP+wQ2v4iOmjliEEA4mGM6\ng7M7zcWYwTuyjEJefM3PzhbT4gaXTqPWXQE9VuEgUYn4Ai4CHrWIz7/G2lQB\n4e+5vpJ0tRb1J2kURM/aghBxct33x3ZpK4MnBaPM3c44RHZ8vhwXTAkgdp+h\no/At27WxigPUKufsiwetM+oPbTjguwo2DyVkWrxywqtr4xwtHl9AHvSguGbE\nE22OIJR+MUkE89t0SzR9W6N26a0BJYHmeJujmKKuCRqdZa1Qlv/36CBc4sXy\n8LLvgpQIRbJGveG84s0yAPhYMoq1S35hl/x65gkkDBSmG/4N7ECutFZDiyQA\nQ2eFka3797AGYatzMhmhqTdb5tIl3M7czC6IbdC0oluoHLPk2xMIv9QboOtS\nV02UgOIWT+fg+ueTse5gHiGbaA/Wyr/Zldc9Jk1uBc/uKTZI7iLBKM7XWqhq\nGw2Mu64uhCrOCFBOUfWn7OMkWloGIsOZ/FqE0qdPVkqRJd2r7098lnWWPQWN\na0HHXKgAqcc7VkIhCiG7qoS/eZ+1uKgCzESIs0d+Sc+pwPKm69cEfCT9mhVB\nHdWa3FzYzpJ6YO6I7XS0rPz6LpnhMHAo7mmOPw+VR/VYWtZK/bj9iVU0rdzM\nuCpCAgbIy00QqoOJOnSKScPGko+FrvpuVuIna59MN/Thve7LRCFKUmiwcUbj\nUSPL\r\n=eOjC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5aa4jOKVBHz6YKc6VA2PTNpXW+hNhkWgdypq/ExheoAiEA10HnrfoHu3Z16HQWRjrQP2m0AMnxOxSWkfw+/DXQh1I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.d6dd84f7.0_1586395511702_0.7234196195802378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-ripple":"0.15.0-canary.9b03ee68.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-6ilM1GNV0TJ+qHj5emt5IxduO2x1JMMGjQybmhdSXnqdCS7NcudartAcfxPuzRcCi+J/rkAXOWEiVpPyX1qkUg==","shasum":"701707cbdf0c44f6ea10e3c51fec01e15b303e5e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39tCRA9TVsSAnZWagAAUYMP/ip/kcPEduaU8qsTyYV+\nj8IHrX9MXOsxpjzoBGdInM+yA/KOgpgsTWQrArY4AMUATPaJAhIL5ofhKlyM\naT8nsDsJb3B+uz5c7FJDiDmYXrSPzi3rS4On8y9m2HQiuJ7g2rnjJqB1vuZU\nRiCrt/qS2ehPEcTJe7QOGdPqNBod+hfWmStRoHnHufB4IVvWfc4uhVtSsjQC\nHoPt6dUeNZk4h0t5heypvmsANP68x1ZWaoMVaViv9Ew0uTFTOMjIqJAhXyGh\nKyebRyOCIjx3MM4rePEXXZgGrUsvHn1BZ2DyId/cOF9HLmXK0njeb4o8wt9o\nQQjqIBJHAtiLeXb31AVzar/2sg5z5w8ZnTzz9f/ta8LL4y1VHAtO7h8yeMCA\n9Eb5BkrhoyrGzjbr2a3XOgVR3OjKHIsJKeUSsNWkG6qwgw8ktFs53zuNbJpy\n45GPLoz9FX1rYSdfqXm+A+WYlCkXU9AIhjzXsBYKT5j//pSTm8mKsSt1rdws\nXubplUflcEOfbp+KZ84DZEzH1ucxFKBFiXtp42ZfFnvkZQdPm1/bcKA/nAEc\nUJH+QjObgAf7Zj/GhRYgEonAINJIVQacH+zDXPPSop3ZRdmkD2Ul0E2BiA4B\nbvs784kI6XumujRMAFP1zsbMiVV9Lv9fMc2Ri/UAFiM7kYZCc/RjGp9Ot81t\nQOsZ\r\n=kLNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGV1JC+KU1xjEG+AjPYN6Waxr8RyMhS1TdGK4s7utY21AiEAwVqBaYIonp55MVynlENrACaCGBW4aXr0EkrKtYO8B+4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.9b03ee68.0_1586462573446_0.6241555996916663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-ripple":"0.15.0-canary.bbc25b10.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-93R5q8Ls0sKVrp55ekvkbAsEZMZusIemKL5bzBWh+8oerQey5Br1nssOypToLImEW0MTS7jLMX45Va9NA0t4Sw==","shasum":"c88ed12161038ba6a893fae09cdcdaea618e482b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcRCRA9TVsSAnZWagAA/NYQAIufOt4qrhcOhIgel2e6\n+YvkEL3vlaAVt2IwVPLxPU0g9zD9yNm/Wbtm8n289N/b8ZZdYex+uy2KAgOG\nZH/eAkp8t2mXs7ButqdCtimAIyAPpp4nzZ6eCxeYuDxvWdei21ppFPbz15Qc\ntKv9reO+sNTLFdEr1Lk34p4YT2jlZ4YVIDKz4HEeNJLk1Myyf+F+Ki1BR1BS\nsC39eVUTg6fUW9mD8+FPuer8DY0UNpPf3zaZErJZKt1uRk6uFDYTU0c6QOBU\nAmnT4jmBM74ot8HM8s0KDnckLKo74DRbK8dUEM55koDPbiKceXGcm52KE6zj\n+dSXypq2pDz5DdIyimAZJly2VsUUaYOYlgzOF9wetCgV4O8gRusisMzC3LLp\nscNDIohvaqVdhu93uXDxwUWMzmer/W2OYuWca8EXXUuhSz1G32AQ9ZzNEk5a\njdg80TyXiH0z3XLdj3pk2SD1OAhr2Ks8f5GqktDpkt0LoSwa13j5G221J1cx\nunjmfUYHMGelxaeZUgV9jNVA3LLafGMW7fEI3OlNgYTzBuhYqF+ci9auyyvB\nTlzjchAhz7vp/USBEwD7ccW4K7txAUiaSzWkz2Kl142ckY2jxTA8KE7FFASU\nY8gHbujLaBnJUV0UAgoH80pKXesKE1UT9u/RWMJcNAV8IArHTb0P+1VVnfUm\nrhrp\r\n=UI6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQq87M9nJFhGAvNsRkXvOquooUc3DR4KywRLtIgpY3rAiBWtsve6ysHZvbg5QYV2jzY77hn80kRH8lhToZ+qZSMpg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.bbc25b10.0_1586558736800_0.8003358752192768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-ripple":"0.15.0-canary.339cbfd4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AS/3ExYIeMrxW6K2etTC+Khtscr/PPFNnj5QWb+6necqyXCmO91eX4UD8312cPO0gPrh0T4RatMsyLCD2zyQRA==","shasum":"d17e59727765d50976a27abda448f17880e4c123","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0akCRA9TVsSAnZWagAACOYQAJfb0EbpfIX0O3hCbHW9\nL+wP/X7HVqbuKYoIz9/AfaH83qprsvhvf7myBSfAWVwZMQC5g+FavAiXgXzT\nfhFy2Un307TsvWhRfrkZHetGF1t7DA+1qXhWiYSJSLkyVRBuuJO5FPHig8go\nqIM4LFjEIq/MJ/58UvSfHxMWOlKaGYwNDXfDsbJQ+Tmx6Ow9s/jftCITEUtf\ncxpCbWJej216yuOE1SrvpVUeuvQDU0T3jNTQJKkl4u2ohBWvlePoDS6GdjcQ\nPJBJKhdH3O5eUkPu8/kmx5cOQqjH991JwEt8cJ+ifdsNHZod5fmmhxTRBDr5\nRZHfn6HznK9vcKCTMQhKGde2noVx9Y5pCu/O1DnLGAmeY+iMChMTtedYa4cX\nsy8vs3N7C0z50eEYvy1ykRyRJOOQcMCybQCIkKHVZx14sY+M8RFszJYpDJ6a\njRjMJcdyLufZshC/dwgtwDo/zHCT+b6pzQhpNmrAKWrHBf8KSkDReVbK//B+\nfDSug0346YPWY5fCMio4PxO++eQoF1clpxUm+Z37M/Bwy1plJGgto8jWDUf0\nYppWsnmFb9xaxM++mRwUwUG21rBEfOEGVX7jmKCgRESbTo1B9jn/t2rk09NL\nGJiIS8wlQGprzWqYKfct6zHWe6+EG7cmh0obCVpqGhgNSpnviKKxBFaFfN/y\nGmRG\r\n=B657\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCULwG+5p4SaJhVgMmRRSAXy4GFKt83SKGDOU3U9QwENQIgRZ/PjwX8ZdC+II9N06U23KNdfcEMO5UlUP8nKiuqpKM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.339cbfd4.0_1586972323892_0.4152289586915632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-ripple":"0.15.0-canary.b74ff19f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J78aMAIByQEVsAWlwnNbVPMyKK2fVKzai7jwAgQLA//eDPE+6a80YyoxtPy9GwCWfqAIcinSigGSimCffk1KCg==","shasum":"ad17eb088339dbc4234acfe4527e15844f13ab77","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jBCRA9TVsSAnZWagAAqbcP/jIWaLWBeFpNORriPzqT\n7upkm9e6LDwOuUSkfvI3X81nKO+cmeaqeAhkydBGatbLV/IrEfYS3bolFoQj\n+F9vrOVHA9epTo1PFIdzl6kKgeDLN4YzLfjs8AJVlxxnIMWNi6GpzkayVsq6\n2pgngG5ejIVuvtO9P0/te8yToPhjfZhxAiF9gOKYGyNGWs6y3cmnGUOM4Lyr\n3DRmMr02hHpDwL6V+q8o1bw3mX7qEWYZI1IovjMM05ONDFDgS6674mcUQivN\nK+6joXRusGbKz9V8QRA0fMQOQS/z7/iuDMh4PVpBt4TxilSrLlIeLoL8tkkf\njvTsk+bWBbSV7FqhXRZAGtJQC3wDnga/J2OR+TUH4n6ncX/qUrwfnigDIa9P\nKz4a463dwDFXJWOp1iATO/pxeuue43mweADBp9tVEIHFQvHyX5bPkoeR71Jx\nvH3+wbhJLSjQsB/ozurdj28ED8HS42DTCfyd+u5VVyLkRQWqDKrutSuTdLke\ncmyBnyRAPaeAvP7RLKh4NKlkIIp2kgikBiBvjeH/Jw0dpHiGgcfFd+O8bBF1\nSE9iS68C54lrZNLhJaWUDvj81ooT9LvH4jnXfJ56ZTKLLKESJUgifly+Il4w\nQbcDUwAvN08DUtVWOdbmt4hdDvR6WrrMQRjW09oNmgzGfEYzIxOVfaqGfNKM\nOlor\r\n=g20g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlmhTabFKpF7LhZnOPuuWepe1K5p3MrdrMAIkqZap96gIgEEwBmfS/3fP+JWOazV8ysnav1v342g6YKSDRKrAudm0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.b74ff19f.0_1586981056813_0.9803290249150967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-ripple":"0.15.0-canary.aaa16853.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IDhKyOeADBRnh5Uo+MXg/HSeLQGqfHXDCdKuvXz//aaHQY25b8v2qcj4h8kEvrXlMaSFW3BJLS9G+ukalE+YEw==","shasum":"333194f01ae0265e55776077a1223d740e6fb3bd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42ACRA9TVsSAnZWagAAr2wP/0rEPj2GkVWgHAQ+lisN\n5UEKE7f8GzK23D5gDNdwj2+v0NAExQ/DgDbwkf6ZF7D/sHWgerCjsfKJjrg7\n4g1fywaGhfu+WQeT4hZuNCcM5Z9Ta+78ahmjnU9P0DVzQRk21xi+SXUxPOl5\nWZ2hzWZ6GG3+kwMCXNyenWffkORQFtHfJni2liXYMdK/xLeB5sSHSEJoqm+O\nZOmqogoZqmFchdnSnh5C+Pp7kXOrvGL0YNGSFWL4ByestFd4w6y8DpeHVOX8\nT9XFj0fY1VMbHNuD+sD8FSMgUAGdNpp37bE4+2dKw9TWBMh4DaGqYoCZ2G+m\nlwT0uyphoy3k7txGG+LfzlOJXcj9hJ64sf6QHTJ9ZrciwM6MnpizuPZgs+Ll\nxyFJsYEONzzzGlYxrP0lddl0SvHr1PYGf0LMXYb/PgG1AgpogdArHM7hxrHL\nmOZ0Lzl2SZbE7EjpWnZWHy3F+KDVr8GXP9TeqHfioi7S/A1kV5p8zP6KBZHl\n8O7fvk1CBo5N7us3D2VSKEmuggtU5u6XfHIGyogZ0eEvu6yjztbyIePKsmva\nZasxxcWSjo81HoHbMZWjVnhzQq7Cn6hhGhxWHxK1JTg/CpYdoNIF4MfOdSNs\n+exMgMIxUky0PDRzqruWTIifQTNHL9EZrpuluJrtNpsLm1NbxfS0KWeA7lTh\nYP8P\r\n=CiVN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk+zfVPZKSOonWswCcEVTmJuW+Uv643qgTXpSokGb0iwIhAKJLB1WpRJcKuDG6mJhvdxVrBnEOJpHbUSqFJkEJKxXt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.aaa16853.0_1586990463601_0.6196789259047275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-ripple":"0.15.0-canary.826b23e7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hzDa64atqlB+y3MCxDo09vR+iTyRuHmkT44c1i5OerKV9tvJ32Sbg3ptDYcc1cZTHaXEVdUiHVJqMq8lLx3smg==","shasum":"91cba39150010ae958d2570c1915de62eea120c8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":95111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqCCRA9TVsSAnZWagAAXkMQAJhq+wLVG6Tm12mwqCKE\n75wcpNw+fs8snl2xBj8N4R81x7kfTbX0MlD5v6pu8mBaQ0+rTxg6BgFgm7bh\nuUnFM8ihgxZHerLFnUA1G4YIioTv3KLAFnD9gMGt1/RT+zUQVFJnMs/w0+DF\nhUfk3nFVC18HVmmhmbN5f22sPhBbf2hg4r/ebjmus5msBrM/xtXWfrHDztlL\n4ZlkUbT2bsleX484d1pVHf/LYGrHPo/yPLNQMKYbHSXjiBXDbrAzbtw/ZjPu\ncGPnaHLayCoK8oph7Kluk+Y6CycMfrwtNGd0Rvja5EREon3k8OcL7k4NXHkh\nZqEgb+bfP6x99o6GJ4Ffpoc6pt+Q9xE81YmmFCyGQ+k5puF/98Efi2A9OSyo\nPrhkjCtjhlopwYxedb+1VcxuckkbNDtLjV7iKQefH/EZJmd7TgYOYgkBzFwu\n4AykTXYj+xHogZte9vwCsBPNug+EiyUCNiEwO7mL6pd5W3sdB6jA1HylkbI+\n9+Tt+7vq0m/a0ZmOmjVSc1CMYmfJGOjn6uS4PZianlIWfxDgNqibLlSjpNtU\nfWXOdd6YZZJXYYD6lMT8eVdXJGM2ITSWmdZjtZ0u0qig59oYM5g4I5weYmgF\nSA4FzMHTtJDrIivuRdK+Dg3fH/9kD+uh07zDR1Sg+Pal/+jY4j/oRk57g0f9\nHHKj\r\n=p4SU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu9/ivGA/iphh1RoGZbwtHW8QO7xcWCuML7Mm5lhGv9gIhAJr0juTAyHCwaZQ4TF6UZ+P05b5brb7SftpxSQI5KcRm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.826b23e7.0_1587063425541_0.26604616823811256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-ripple":"0.15.0-canary.e1ad2b2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y9dMCfkujGVezKX5zjYQ7GIs9LnR+5aqUajoLhPwXPDtpTpx8JTc80oEecN3+iYwK7ilUfCC9Sg+7bwdupavjw==","shasum":"f7606f31cf97d19f16a9f747470694c524d0826c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":95404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVJCRA9TVsSAnZWagAANQIP/A7Qyoy0pfab6sNU1o2F\n56n2PLgBBXUeK4quaZxZ4Jn1LP2RWy3UltJwKYFW6Dl4jzWG12A6SYB+Evx2\naiS5ARrjcGHclH9RWlkGHS1pc5QHR79HbvauxdwqF1UA66pdnFmZFV78WeJH\nacCjdJuX40B/TXrDlqvWIxlTUL33WzIaWShicZL6oSHGjQc9LrlIHZSpKxch\nh/tHFK0cA3491D5soyZ2f0xaUNfNuK/iMq7MCbw+ww2jMhAsdU0vkbnsi4it\nursq9RlU4w9iZCMW4IUyHmqmUprHuCGLAugH7ysIJQQKC0YxbwOF/7T3lFND\nLwnawamZcfppPOeteY0rhcnw31mgN7G/7ew0GZv5WxA8CyvLPJGOgM3+6IZD\non1CqrDCVRWcEFztOPT2HotxPDEUHgIsaoEwCvGA1kgnnsEgwqrH1muNq9bq\ngAhigjxJOTfJ2crfgv3IIGCuMtFEgi6mtKW6I2opye9dduepWrLahEaK8anY\njnyjZjPB3nwD40YHIBNL0qdrNDtngN5PjKOEdVF5Ib2otUZQmNljVXEeZiTH\n6HyQAhpBOO1ujDySi65ZrqolpK77mPILz8DulOkCGlqsVZOZsVsm89mJtGP2\nnBG56rU4x2kYnmkUa3a9uwREitlYjLoVucOD2yWdmzEwog1/D187DS+CgCE7\nBthQ\r\n=tCer\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnS0JPhOUmoGnh0h7u4yy3lSboivRJ1Jm3JFBI0NlHmgIhAIE6YTltu5RcIR3TrJavoTpZ+P6XFtr03PE+43TXRukx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.e1ad2b2f.0_1587164489233_0.6863665545599176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-ripple":"0.15.0-canary.bade5580.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Qnq/P07MQJTRKMMuBNweQZ7CqWXwowyORyEOst3L6fnOFXa6+voNCn89ZJr6zRy95XjQvyB6tplUt23HdwYdXg==","shasum":"e30c5e44d4a69e3837fef4f204f9f463e7614153","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":95404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjl1CRA9TVsSAnZWagAATYUP/1WL21UuQ0tPQPPALtXQ\n3WieXBrlh1M7BrTwpbt/hB0XGjDT7VEfr4f5xUuIzoAvpQZLO2Ee2YVJN73g\nH0yR6XUVnSXgvZVOSDfmqm+l4ruZz/vcmkWL34w8HVg49/R/cQkcOsqRB9if\ns69aKaZrKbJsRenkwNwwNthBWTd3v8TdZhEGE2sqKVnOKyPhw1vW6lhp5u+z\nVv2aAuxYFJJ8U641YgvxOMz3WoobgXiAWD38q+SiNbalO+pDwVrmyS6R+xuu\nO8cudZKiN2BsyplLaE52ieYrmh0aazi3owXxoE2Jele1dHoehZD+AtY0gL6L\niz9TVwNS7jT+FJPRjoywo6Nv5FXk241o8DdOeRLaOFD09D3k8ZhYBZvU6bms\nL+mxUBlvqdVYbjolUdSzYdZ3Tvmz60Hz1d/zLaefGl+Epb+Vz6PuXXR8Kxv0\n9/5dzbs0r9AIIt+JNE81a2kLJY8nuybvZ0tPwWPKtl15kfHnyFkKQ+RQwuPg\nkNvCJ++vmDfFIlIMedM5n/NoZusIC4dS43MK1m4ZcvEjFb1ODe/QQV25sXcX\nhTlZTknt6dB0NdF0kwNNzKHUESfe8AbPy6cPQfnqb8qYCH32KVLHN85Oxze/\nW2R9Me4WuszPkqI94wylM11je0VPXuaXmikJ1laskDPorKCT5LlCd4iwFTrH\nGk7c\r\n=By3A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1cAyHM74i6vhTWxGxpFA9cT8wrmYflHe0Sy0sL23SPAiEAhVF1u+skygmN8CfVn7oJWI+U9S0aW3pgWonhIGakelc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.bade5580.0_1587165556981_0.24081561045165478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-ripple":"0.15.0-canary.dae38247.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-V3uobP6GgiYFVUdaX8skb0YXi0mlmdISdaaKXYutc+t1B4jRINlhy6HOTzFdBfgIA+MshERNBMYRND/oTwZPNw==","shasum":"f864ccf58d5981df232fd628aa630f523272198c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":95404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbNCRA9TVsSAnZWagAAj+sQAJe4DruaaRFk/jdyEyJs\n/YOLGhLdYT3r8OsATqaw/OHHvj8lmE6VCo5vgUNN6HaqE7Q9djUiyLrZpf/b\ncpYdna3rQapwwj/ibXmIFkRvYrwis4DLln33+54OcY5oc+w/DyFiGLGGkoYp\nCiL5wLe43hoGKcxeNqYp28OclWbQjexapPQ6zqvN9hXH5tVs4KMY6zGa8jfF\nyFbI+r5ep5ZQyN96AqvgAOUFEKiMrEmcuiI/13M0+b5ZhAGqqPKvtyLTyd6f\nmRQdpObRAfVBOr9515jQ5Y4wIJfj5j6Fj/jmgEksDLcCeBQ8cwvcmD4e4uVi\nBA18uEQiEZHgLEb1NfyWCjozqOGqxIv14OJ8iuGVc3ucwN8jIQwhHosN8FU8\nRqSjEYures0xfIOilzN45bAWchPivL+cuBR7TrmQwedd8Rm4qHD8Ln8A0Vjv\nB7hm8fkLzTqKyAzg0Gwq4tLiPtWbNN6YuTz4AVt7qWazCLk/sVC+3AyNDDWu\nIJeeJZAoFE6BmQw5gV3dYeRErjQ0DSlHaGXOKXj3vhT9+L8kZmTQo6kJ3A9U\njnNndlsfxTWW9CAKZZ2+q0qSIVLZiISBvUX9pQfqDkBw13hdZwr8BRvfW+6q\nwcbXj4uKI36SrZVr5keM8Gn/qAwfOlXRnm8Gc2zmWOw5oWM1DRrHI0oiyJN5\ngw4m\r\n=UnxN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBM1LxB07pPs9EubcA4rZUdrIaHpjb2Em5ryCNAC74GwIgUfXZeANSPA3hQSxtw/KY1GX5Q9iEjP0VuQfYlrP7Q5s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.dae38247.0_1587168972859_0.2593198093589104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-ripple":"0.15.0-canary.a04c0b82.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-B6z9e2UWcUXbJGXUBcQ7sYwFEKZnhwlYrU9k31hmmPKslqz+tAsIQK86C69IEwxIQk+v8Zgf3iNa1nuOxqK26A==","shasum":"690f2851200f84d2467bc76f22e0b0ba70e5249c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":98743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksNCRA9TVsSAnZWagAAyRcP+gNmAa2+Vw1yg9LnPxLQ\nemE/+nHWa2bEZVx5L0xF7Gx48/7v+FQZ3pchWF1vN9iC1Pctjr85fi8jhHqE\nIX/TaLlsrDY+vm3yzgd4DBuRL02J6T1J/DZf7re9VrdsM0CxmmWbP63Hpeso\nVEgTm/qpg4Q5Q9O5SSENHUCUl4xbNsIwzJ/JTFu1Fzl0rFLmDvDhuSVBU+bA\n9P4jT8BNTk1Hxm0brruwVt20c8ybBqy3oE1bNTq2veHOS3OxFYjHAgXA67uj\nvDoFFsg9hnfFGRdysTRnVTyqfAtG9+yTLGroiuaxEs1Zw4lVFXqG4fB9oJqz\nNP1LftK0wvfSTb7fnvGYQ3z3UzrIbHDJBAXbf+IqtHh1WH3fh44wlyqdkles\nBCpD0MU75J+qn9jXsjQzdsFM6cO/tFKoBra2Hf04fe7SmY4pKR78ZxDO6wbj\nFIlw+aSJO4GwR1XWMneCTP5/5gj2lahYGWLskLBcn/uAQg12Gn6L75A8FlBN\nZ2RGzlpahbGgrtHQMcAF7pBBrSwIzcivj1kZWLVyj3lRbzDJFcK0ZTXsSB1x\nwvG1G2jLK8pxCD+SWtwvZrvTaXUGZW6UNH0VvbaPpKJkHu/VDEPHJm+X5nrK\no4NEuZ4YtyxBFEt8dyPaIU6/O4+j9hit8yeCYsq0yMKfl+NMfPUdF9r6ReZF\nChEC\r\n=skBx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo3BcQ8ojclSHXaE30iAGX2yM/06KuDePNMujiVVOOfAiEAjzDLedkvUZZy0/BnG74oR1xOG+SZ+zbKYcJaEH0LRpE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.a04c0b82.0_1587170061334_0.45007440761805295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-ripple":"0.15.0-canary.715decfe.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p5wIihu20KNngDimfT8zHQaRDl3x/LerfCQJFcAtO2slK5ONREVFSeWGRelnb7P0VWx22Ct758ikfw5Z+gJbXQ==","shasum":"6378e59ad4bb2d9b35c111868ea18c113e5d88f2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":98743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetnCRA9TVsSAnZWagAADQkP/iP6COAnoVMrv8Y9asX6\nI7XfGUMslg9/4Eo/kcNlG5cR4DU+GDezl7/lYPaVLSj/gqIF4U+yhWUwmZ6Z\nLz270d81MUIxnLs1+61G5Gd1T/dU6+Ya0fWIbVG131Afj5cK/iD6/Gns6/Oc\n4j+CiUmePK540IjhVzH3Lm8U5qciYw7ZqGlgGoenmumXLzOjesUDfMBOPQHt\nCjUfTTiAPCKP7vyqBBORuTB+bT6y6yZrQl9x/HzV95k12j70ExDBWL2/SYEw\nLF7QboNHMVSu2nbs/DaIkrAG6WVDXwR5KuYnyVrivYQhaJ4w36X02qZlQVQs\ntjaPgOmxzNmqUrJB5OQmeUgZHxI/x7Y6M4TG12P390k06kT57ukn3UlYkgaB\nvAY8k3azu77ForglJI4C9JgSmV/4xVjuDiUEPdPMTJGKrRaSUjk3m80nX68x\nMaauwitW2+38mCZVwojDpXhSyBHaNEdgTA9vrpNM6/pp1DyYged4dZhNgw8B\nL63zhFGKf8HWBcR92pNojyNo2TZJFsXeuiBhJxlFuElOf407OdEinTJ1rnmD\nJShiP3ZJXkfE/Xdm/EtB+/OdMtYkZFfjZfwdj41sr+NK93MBu3yzIk2ipu93\n8yFuFN3wUbQGcauZdk/t2naPyUS5wIDm8Xzar0nDtC8zdfbX6/RgE85AYkX7\nMhL1\r\n=vq7D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGUkzxS058vOCVJu5khICm8eGwG24oqxQRlsOpRUhw9gIhAP+UMvdpV297uN7HxxcwjlUQVWim+d6hUN/kxdRtr8Gr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.715decfe.0_1587407718809_0.6356286079778217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-ripple":"0.15.0-canary.c862cd04.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-C12R2jdzZYqmqUx5lFaE5cleHYqiCsOaBnMHOc2HnRamnj4W6s1lobFYbiV7xhC6KlBKiTV+s9/0NQFUiJOwzw==","shasum":"1297af47c45c8f699e75197b7edd49ba062d48f6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":98743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVPCRA9TVsSAnZWagAAYwgP+wd2ARtNLOCZq93Um4Xn\np4tqrin5nXuIqhLPkbRPGlVwGD4e7iERoqAQyg9/WqkMzjcgtoqZ/a1nXCZr\n9xkEp4jQG3lIn35Q+SxRkt9QZQcgF2LWZOooV93fJz6xHKFt4QmunYVGIC8+\nXqjdu24sj74AtPILTHqfsAh/QB6qyLK25GGVWkT2Zds+oZOAXXmYt5lz3EQK\n1pHEE+slNrzpX43GZFrqf7Gojqp82sgRYO9mA0+iWsk2lxE2Ls0KtsNjIoEV\nBghabC4ZAlT1khOcniLvyO5gbsGwgBK9BXv/C0h+XihXrKFOc3E+UNkiyQea\nntiHGw0UV4rf8dgVkzXoi48meOcp4ZVtqpOkJruz0+nCHMIAxe4Ke50MMumn\nXXENFn/KfmLiv/kdSFS3AmwBzLnpa8n/cQSGhMZ9SzOiyWLicMvd8BuC06NB\ne/KOZdDKDE08hMvNtvtPmweUgfaP93TVIX5KE/QCUddytwCxPLrXIn7sl2p6\nGfKXLP5aYKaIyhzUHgMqIvscWdeR2YOfCy3mOqoc6aW5vN6Z+6DuoUrIFAxX\nTetBbrE4p1jAuSROAc/atpM4BMZmCkyyx9CZW0pX9mbrtlFPwQnA8l6cXNRj\nQ0zsQF0lR7C/JSQuzogtakn/m0BHrUMkeSXqQHKgp7iF9J5Tnjxe6utO3VIJ\nQrjr\r\n=jqbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX45iWZXdktg+gmvjJeXF79LJA++DaGJAF5pARHnQmkgIhAMz4WCtAVkt2Xo6DRVUHcNuf1C2dE76ZeXbvBrfTD9GS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.c862cd04.0_1587418447155_0.16933302439133469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-ripple":"0.15.0-canary.e9b01b35.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OtkHxgoW8wBfCHVd9RABUM6E5W6DiJWeovNo2PqFXTsNuBXfWMDYATYc3kcoeP7lTzN0YXTr2Xq4IMF+CJdqrw==","shasum":"fadb84d5c87af07f2b3eb0afe645cd4758787ac5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBZCRA9TVsSAnZWagAATrUP/2phTmYVamyQ4QrmYbOi\nqaWa/yCDU3/CvA2x+lY0U0eLC7kk+9J1lacvHOGoYNSayvm4yLa8I29ca6C1\nwxCf5xTpHXLO+ul3YYKXzH4dXnsqfvI54un8Fup+aqjEbbqseqRAqgP40EGx\n2eWBeRfMHby0YSDLj6HkgbbqQuw9t8z4NlSOnVZ+gHx0jRB8JTiB3lIlqwu9\nOY2uUfoXxf1ezxz6s1rLwnA27vdsueb3U0V2zdXMWXF8BzcjkmfI2gXiKZBR\ncyL1TNsADVG0QCSaMptExk5ZDTREC5X0d9SD2vg/0LQ5/bum4dbrGrmnJxER\naSalhfwF+xeP3XLQKTGdjGm0rnjUiM/CB4V/stIa75cPOhU25W2bsiBHvx4w\n/LZRmbym3fcygcCL7ZySehjzroQ0tE5lzuI4XNFtXdX3qaBdV8m/+Lo/BNH1\nVKx1MLU9AsS3/2VMsbFsUdE+osM3TCACVdMdZAZqIo5YExfATIo1i/cqqkMB\nhFvGX7vByNIvyKBlMVcgZpDo+G7GJT+SpiB0t28tUsWLWORU4vFgx+QLmsY3\nAnh3YHwINYhpTUGjkmWAaMdjQszL3HmCfxwdrcbDds/sFIlC31b5GehbdsdL\npK0gQ2m5gyV/5UDrWzl3JLXLzMni1zzbCOMtKyhbMpmognCsyLsKekVnXgNV\nmWNB\r\n=KUB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd0DsBd8C/eh1CnQJIWq3g4ZPuar0LSnOT//huy1ggWQIgWPndIVZNPlSoqyZ5haJ3AwDJmd3yU5FGK9ynFDAUltU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.e9b01b35.0_1587425369037_0.7176873772060335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-ripple":"0.15.0-canary.ee7e8989.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3V59u11JtzFu2Rjr/p6UosZH6lAGtZTnX+IkwXu0F4lwNEp18e2hTH/s+wqBDqB4OEwmwXW603hGfRJ31/s5UA==","shasum":"2719d7a5bee5c681f0fca53f7baa360f65bba8be","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOKCRA9TVsSAnZWagAA//0P/2ecc7seAeuc/fky2L9p\nOoC4UeGaZuirGBbJTdM71whKsUP6hOJlDSlw9PkhwO3dkOfvcUDVwh3+/0iw\nCALQE+4g6p7HH0+6drwO2h7+/a8WuuISlKUDpqzxJU8bHV6KoKzkE7C/Eaum\nuWZ99ur8XZesM6ff/lfqttILw1f5j0qtLzrsdVCakbP/Zi8c/j7AEK+m5xWR\nVb3qyXwSErHddXsi/kFU272ntE3cm6ybwPniF8McTUNMZMxMznzilCbCyxTe\nUqju1AIT7M6N/QdSXGEbcLJ1Lkp7KvWEZ+vED3dyhipXTTc/YSrz7my3zQt3\n48eq6VhytvR4TkYbjEQ1NtlKCa3wDzujzjGNx6BZpMpuzcQ4+fu0w9x0IHHk\ncv7Pq2lrEb3bwYXQt8AXpaak1yWwxj0uczOXkqQSdCQkJsNa2lEpsBFXW8iF\nWqqtn4fRC0RQxDrldGQKN3pwgYBwT9BTV3+G1+pYBJFDU5E3ptlGDXwLGiYs\nOF8FG2Et/nGHAvgridlckjHIyNs0XFWz3+pyRKiF3aA/oLeo9xr/Yng5yvtw\nlmwGzmpj9wLQdv/K6Y/ZcHueEcDkXWwp6LxO/PGbpP4CFk7jGg5jlx3YXJK/\nxxEBVyPYn+Jnmst+ncoTsxlo1viBci97nyPa129lPUUpGGCc+dPz44OuRsz7\n7nls\r\n=YUgP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0g83Oz5nJsmxN+bQmRroVgJATZwYpuGSGKj9I3PvtzwIhAMk1dDK3UMIWd6ItbRKQhhXK4DmjYGsD5/AYFAPbmOMU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.ee7e8989.0_1587430281729_0.6648193009225942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-ripple":"0.15.0-canary.9bf47ffa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FPH5pWWFZ0VWDwqAUO1yx0EuP0UY+zDlKIlg5Skinc6se2iYzN696S2aC2YxhQoe6UyP4K5hr+TmztvzIg46VA==","shasum":"6b79a42d62a52abafdf0f056561873bc032ebb0e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2JCRA9TVsSAnZWagAAwSQP/2LmT7qjZbzU8SCm9lTU\nYsjq1plQekjuxksrIUit6kVD3lN8W/wFGn4gDKYOycp38TLqputgWFOAo+KP\num+DPDgyrmAxHdNc5d6oBny0BA6vcpWy5SZT+BVAzFRhAE24CL7CQoZJDTC8\nbusx+DlWUh8W68RmowJ3RXIZzBx/WFIkesr4FGySAid4L3TfokvpRSh+7Aih\nZ/MeJ9/KR64a86wyP2vFLsermxJvlljV39GEGQlS6Am8Qkw1BdX8mkkpitb5\nKHdYrHOj0moHMbgMjqUyflDCOnC67f2vRZYio1esbw1ORVUPK+icNFp6hBRZ\n8iXS4QBf66xYohQqvPH6CN60DGawy9tlNe6jTp5z6YfhzSH6kiHKBtVcvNDr\n+lxColVxqz+GVxbpmEB+H/Vm91QwqK5Y2SwOWQ2ug5gxIGTE8hA3L+eEVYYj\nOPOBGfYh3Ca5qVgTYikrEA2GHvZNERfYN6NTSs6a/xEo13Qc0HgkOe8PMYYO\nXkcPDCCOynJBcsbC52xL3U40ZstdvzvGRf45OLKfmx1YFF6F6NzlI0yYkZgd\nMGyDY6YURdKMqSWqZEl97aLqGu2YnE0YZzm1Xgl6Hya87xnluMu52PEyxa+T\nukfmZ0VkCGD3FOQjcHJ8DDyxqaB1wmpt/ekCOxwU35r3sXc+Cyj7R2AkhNyA\nGhb9\r\n=ZuIA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmnlDYPijM3QavqrA5iRIt64uJbDLceItdTjuUm+pcsgIgUaarSSULahtyEdc8O8EdTuCkM6IFJtB+Vv61KjpWk9g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.9bf47ffa.0_1587494278873_0.483824509499184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-ripple":"0.15.0-canary.078dbd98.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BIUqG/1OdKzGBfzLE9X2ltJue++CTLI2dUlhjKkxIUZLDDkKCQvLJzAFdnBzwQE/IRwCNc4gy66SGBBzu4Q/vA==","shasum":"6022217837a8db44f85eda69776df93ae83fb80a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2G0CRA9TVsSAnZWagAAAzMP/29oTeXZZh89zof8cYIo\nrk8y90EpySkey/aLcAPwGzTIgFpiH05rCx0G53oMR+IQKnTkez9P7yxGegro\ncJOO3sCt9SPnCjpApyIDQ+U9DiC9xqOdHUeji2sUoAN+VX5ZWDDWC61AxiJW\nOM+4EYGuPh5yatpWJA6yldGXlxlVD9pN8lLskBt4XntkAdbbWnajOcV2JrPP\nVpEwS2p44U6GvnkTWG08VNZ3bAzLJqu8PAAS2eAsMsw/H7ZdoaYIOYLOQPIC\ndZfDC1WBzkzwS4gJDFRb3jcv0aLpW9qg/Sr87EhzltXqsPeA5QzN4wULogfs\nMnwholcFtcgFnffOa5/JUF0c+FqnSA3H3Nm4qACWGx4BlMhKFOm6hjHLAZx7\nXlhykZZhMlvjpBC2C7ExAC3gRb1S+g423+Ij0Lal2gTPm+uHOTimQMa+acGD\nL4kmAx1qVDxyFXDVPX/Vga6V/VPnN8Mb12ATAhcfX5TNS7lnB5R6D/1GngKU\nLbVB3/5DYEchpvtBgPfgHSv6SoYB5awVmAefxbTCZTqZnVqVEAUSbOHHI3Hr\n/67P3jw/ov1qSDLSvOKXCOybv31WkhI65F1EWcZNAdgRRtUEcCnnbJTCS7D9\nEhTE/eF7JkduEBhmHjEsYBakC9qoOlKzS3kCYobmydu6IVQCJWb9cHW4suOm\nGLwr\r\n=Erv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB20mJkb98Gt/DI5QoRpSnjebGsdRfHVOFAKMAm6SiarAiBfSUGBIZp0ofotkV1CVw1iO4xUBKj6N9GR1eLgODIcjA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.078dbd98.0_1587503539643_0.6692402258038153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-ripple":"0.15.0-canary.953015d6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yMYCTyY78hlF/UNJMUnM6r3b+LeawGlLkxwI/5sl4F9re7DxMpxcnGG0SFUzmKP3zSgciez5WF+DBmGhAWwg5Q==","shasum":"a81da1fdbc4423df6615273c9c64a5271f0c3569","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2crCRA9TVsSAnZWagAA0dkP/0C08dKXhBJ9hbPbZkoZ\npZVc65Xl/sruQOyC6llEi8DVTSXpOqAqfYtxO1tMPts62FN5FRQTE8la+e7Y\n7TE8UiEdK7sj+DWjxOMqpcPFCtwAHMJkLeahsYwGjvsoG0w05t74/SSlTlYz\n/QoMWHZqKzs9elFGPJflxyhVdic/J+F7DC80gdHfTT6g6u7gIr3bEdSlaYM0\nBMRTWw/6uqFwC53wU592aVvRBZXKduNiwf8pZ2WFsGgIS/A06Rt/0RDkZLyr\niGlcoRurTo/+iPvVIjlnqClYhBLJlZCO/Q6PfEMYoQxf6a8HJU36m8JYbKn9\n35LtT7C9OqGowr1ttr3Orre8MSERuBNpITfEGqDmUmi25c4zzjA7nNLD5UvK\nf+MUnt63neaZArL0eYxpZWiNdPwYTvILSV2YO+LBYrS8NdbTQFrX9SrGI0E+\n7wt4nDNOReP37dW9qGJA8n0De9n0i70L0Y2k+Mo2mYRZ2CF8eJupNzVbvSfl\nvj2fxvRyKycZJI9+7sysKoyARLlPpVOWhOYCe2LD4PhdbAjpBImh41trccmt\noNbij63tKuJk0gdIPKjytz2nF0zDo/vL/wjYTcySmPOZihNelStqJMcngnXq\nKtVApcdMKUfGsZ44RFwYzSgB/Uldkpo/FnK85o7PWiwz98ib2XspoIKxGRoT\nOOlq\r\n=2NA2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFduEW5b6zqwbgyQ+jCzexsMSDXRw9g1qJJYHCEablwkAiAe3HxHpin2yaygdwfTzi19H5heYjyaB3J6MmoA84QOZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.953015d6.0_1587504939226_0.9866540989780155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-ripple":"0.15.0-canary.c360ec63.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Xo+/FabKdOiWCmlNoxcfeFkR5ruzVwGc7pF4aH0FSEVyRlcSKtHQRnt4y/XjCs6t6radkxYBbjvMrT8GMg35qQ==","shasum":"bc37f74dbe0e2009d7a3b4a8d02ea4a60b28e7cc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yjCRA9TVsSAnZWagAAVpkP/i7ZhDB2QP4MYV24Twhh\niJSJ3XhtgKVXi8fS5eAAnZ6AKMPmHmqHfVIh2DllvTnwG5tVb64jdgJfhyip\nhfU6wKYAOipMLRHR7sPis7XYd02bGSYiuZSZVdJjc3S3BIKe8epdphbdYGyI\nGjFrPcKaAzmN41Km+Z6p1IOEhXDqHrXbJW9we/6ddyUMBxwbQMl/DNsdI8Np\n/J5YJ0l3a/0hwSZb6mIyQJ5iU773nLZbMDMMjJ/qucK/eY/zVcHzl6yOl6kI\nGjY8AmmaMSMqYBtkVWPPxECBQAC/z3P5ISHbVdvTzd6JgKm3FfdIYrShfyUs\n8DvInIs4ANTPcbr1cnO/Zv0lrdveKiKTHbbQFLflvtIaXMrVVAC6oMGcMroW\nlvYIiMWwIe0KqABn/+PKlhTOtze2w+deJcrRQLGyLqorC8e5vF2V1tbHsDjZ\nC64ur3tqHRe4apocesFCAgCMYL3LQ9oBjBtoC//xUKby1reuj507nO3uuMuU\nU61a/wOehpw0UlMsG6j2wMe/kqQo5KSooJPp8SktpVqh6KeO1vcQItV16riB\nGLF/uS9ZcKXIl2Zo4biQRokgwLw5zsLptdNNR82YoYwhAQODKCf4ttexfgQ8\nN7jeqg8tYbEVn5AqUhdvNngN9kR1xIEI7HUImzJEhMup2h2yK2o29hf2v8Z2\nG+2+\r\n=ixwP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2YAJSkld0udKFEpw9pxgrtxeErGmxok4g1f04ISqeQgIgcPns0yfDZls/TyBFpwUIDqKuqENnGszlFkYJdWMsFaQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.c360ec63.0_1587506339057_0.7368000492247619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-ripple":"0.15.0-canary.d71b65aa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TmoWpfjn92TXoPSvQ5bKLdccjRpcTKLTQAmywJuR1tAN+fJvZ8La/nImrerZkqQSLS6wrydB2gu5uHgQQYP9og==","shasum":"78e5314b4604a253fa6eb594a7a8046886377ae4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3W4CRA9TVsSAnZWagAAafsP/1n5V9rnCfOsaSVw9lsr\nbiQX/iTP1DvvaMYdYZDvk89niYSC01uwwTGGErm5v4uQqC5fAz4bVXr3Xglz\nbi/u0xRw+MoDdhEwHOyLc/osKfeI4diNJgGR7AJenr8EQN7dvGqMCEldD4LR\nj/KQ+qIFl63dqDMLJTzI8JDQz7r8A2gxUY6dNKN8U4NJLcdJAOZdWTMJKyi2\nfOWiqcp00qbUjZVyojm8wsYct3mLJvLwVt2cex/+CR3jCRHWmgUTrOBiT1OL\nZF1fXvlU/qcd3TBR8zBLDkJqFJNf87ClQQdbV080l+HTscsV1YnpN27qI5Xd\nHorYb+0PJOz5qV8tdE4vZgTq+vrwBtbY1fus9BcLOGXXSuGO7kMm0u/slV0s\n+U0V6LKkxIFO6ClE711kWxr6Tgrp74vb1LPdpg1QVXcAbBnjpFlQ5fE7vEDZ\nMjrvgBWM7gqzcDVQ/+/FBn2DyK7OtqjqgFbeRA1+l4s+W0EdOLTS60jcps8I\nqeKhZNPtjLkFrkP3TdK7F1mx3gK8VFfWs/iwKMdK4rtt6majInqUXbWO38Ka\nUiWBT72nktXMI8rJ+jK+G2HDTP1gHjdbKTp3kijZ9FxQtcuW+0fa3J1skwR8\nVBCZ3w0V8mp+GFMbYRnhQ7x/wBpUg0HYqgt01jQamIHtz2ymA6RVDOFdlCp7\nYL2r\r\n=7clb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQruai48roBE9N3ao4KWNxFlrHFptdq+B2O7UU+LgpRQIgZiXlJLr84S5lloV9nDK5fZcg4b+Wv8TybZ+rZxtiskA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.d71b65aa.0_1587508663741_0.051255544613337145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-ripple":"0.15.0-canary.58d51135.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-R6bbkVAoVyBJr2vj7fKOYYaV3mJHIuFrtvD6L/PSpYCgEwi2yzGq4iNDWoqrZ2/I+mbipyCgmCDV/eFLFQdGrw==","shasum":"64e940d22c04c571efb951c890f9322e1ec4b41e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUICRA9TVsSAnZWagAA0bUP/2NQNB+u30vlfnOmH4oD\nPswPwmOTJLdhseBH1xEkwFyPdkn2AcSowLd1lFQ4FOVzYXRV5hQnSrY/zm/A\nUor3u+keevh0QSuh38aFXLLkm0zgr/OvqSMAC+UN2SmFKkpl7sHgv3yvboAK\njYYg4IkeTLl4WAg0vdX1FuztsdHI07PfVTDf4mtpjwcSAEsaKCiKC2HBHO9F\nkNVQ9eKjEVitSE/capGHpvSz/G3SbKsBqsj15VV8Lc5odbzBCHOd7JrDLOyL\nI2aVZDNECpfWWrnAhcruuiemFqNvuio6Y+B46X9B4arM9EHayrD0xOAp93cF\narzcJnn27HmkwiWOU2HDKmdteybc9TraS2n5mrEdtQUAvltl5CNs4vz1qBwG\nm8QXYJBK5kCY90zMt0UAWwdY7P4EcFCzDpiUsDJGmDrgUlarkNOrEWoN0CpX\njatodS9U6cg1aE2qbzfx8apiHRsr2IGSS4QkWOY+YMcFDt5s4/PVlP7ji/hJ\ncCgyPXwEUJE0ucuXM07uVVFxsxwJC13h5ZjsFuQekvnW7ikX9BMq7gN6J9zJ\nCI3p9mbVX6rDO/Q+OUP5sUE5Pd1YZspDHiK8kWWd4aOgwswH2UxMw1r5kFhf\nrmI4rjYE1NRW+NMIjzgThJCxm+fdNly6Sk7onWdz1JLgUbsoRNRNm10EPx6F\nKCJS\r\n=uufz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfDWu0MiBnastG90NpIKKN+o9KZfDu0hQcAqzQw9vfCgIhAL0bPHVzwHmjauXYwr/xsnn/QXu0SQZtIhnisMR561f1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.58d51135.0_1587602696519_0.4718174234094692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-ripple":"0.15.0-canary.d0af8ba3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-V948NPxOlk6W2YRb+f0Tn4M/GJkwonm55ceKRF/sYP0owGWH6eZvB9WWygyJAUdhjQf1xQ/OzKcluijlwuHecQ==","shasum":"5988bd959787e7d3112217eb182335cc0159c524","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodn3CRA9TVsSAnZWagAAm6kQAIeUSWLjiXHa+y+wh0bS\nGWOJHgFGy6EyJG02lJ1k/5Y3z7QsSZTUsrYz7Suwuo3NXC7xgCCay7bsjazV\nH6QGy0n2iEi9VdPDAx85oPS1CshR4V3+jxeuFKAPJepkKfsDqIJeUaErXWiZ\neI790D3lQl6KKbZ+6WsJxkW1QJ9oK35tZ7uUqwVi8WdQ5AxlhAy6XXobrNgr\n40pt4bDQUcn9jURA5/vNpsfJs/bbdzIeZnfZ4PZNPrjb+cnDcTTjZllYkeqA\nO/hLhuq7SPq9IJDWcT2bOsTlOfQs5XSignVpXPMHYXQ+Vi9szfTs59DbKxuk\nfBLBS1qcbrTMZCSOKtVxqPmGHOwu0QoaTZbvC0nxMWn+NErQEQu9mHo3Oeva\n0xJCAdO96bTnK0jQT/Z1oDoF5EsvpZCrqr7rkU2NDnVyEekXMnK3dnWAMjBn\n2F8SqEn9zseH+oupWm6J2IC7fw3hwFHxeJcNHMQOKEeZWOHSopLEncGki5cN\nJ8YXsiOv/roDiVhn87cZW+uxJI4ffWirlG1JlsrqJ+twkkwvbX/F83BTHLuB\np5gEN7aq50mEieGyWoK+kgUpIYxdqIvHuj16mhUdHgeREUIiv2j9A1vK2wwQ\nU1sMxIH5oqVe/Zt3XLgzNarnwuwm9V6cJ6+7CD+PrL+NMCVyxAl3bDTeVMTz\nAPb5\r\n=am7b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPcizpf2Qk162hyFblNm8WG7MELJ6RgpGkO4pm/2GuBAiEAi9Q7Ru7ADxrYeAF6VV15nSKlE2tnezRlmr98N/IQrUQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.d0af8ba3.0_1587665398921_0.3488815721212861"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-ripple":"0.15.0-canary.8872b17b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eUUTKD2Nq+jSqBZ8jPWft3g691qZY1gibONhW3n6zGvkkWlVgW5Kjk/DnFafS14FleKetlGqK/u70uKF2GyDrQ==","shasum":"b10b019a76db39b5ccc965777ea2d8b729c2d9f4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":98852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1fCRA9TVsSAnZWagAAfLAP/jUgSIfY2sxkGxG6o0N3\n/6EWEq9JqNp8e3p7/ZQb7CDyuGaA2au8/eLv7il2p/sEnh1QOndY2q8dk6HX\nG9cLaOdnVYPfYNohTvfDxRR6kvzNW1j0v0xJvfm9wG4nVa9AYlT9icnAAnwg\nRiS2hmVcvGOjr7GEA9ybbpVUumC0J2BB7Se5xE6zxRlWp6+u9D7+q7k2RPa6\n5ZFPqFWyvuRHP8phjkMPzW3Lz5PSsp7Kh2wgL7AXZnpH7z1qDPakidF4odnb\ncxdlCTR5DNxu3lw7EuU05zCWrSHhJUbEHKdmoZcB3KPAsmX1LaaP7atlm4aM\nGP4D13uuk6NaVsI4Sh+iTdlxZi3+zZ0IdhVrHoYAwUUdchuS7ShdXaabnsjp\nZhEC085wY6TIvEghpDUXSfIDz4URwR0f3V13KKtGh7MdwbCRXlLdxhY7DU/v\nOKR8EgnQeEoRQlKqFT5p8Azrqvs6Rt+qr9LyF3ct4SkEUniq34XNuf+Dufqp\nid9ltR1DWa4fqJxExSKdE+mBQCkM0MdWIppW6F8gDv7tAHssMjNjTSDzny9t\n5RjxMegVgkgSZlJdfBA0vUPYNOkk3jQrzxLb047BfdQOZpkjlPRvEcfWMoiO\ngfIu2W0XmNPWM0OuyyE3Vsbbfl+pxm3+qmmTo4HtgiUOxYm1n984wZ8a2KkS\nWVtG\r\n=Y9Ft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY2Zv4OdCDripZ/MhwONLYCjEjxMMMYjLSsIcyO144zgIgEMzT6BKyFn+7APQynOxknBjp6mq2ub6cCqLrA2SSry4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.8872b17b.0_1587674463097_0.1332621933023388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-ripple":"0.15.0-canary.eca1a610.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AcFwyGHbahCFI1qEE9Szf7ZFQI4HPk4panJTurPcu676zsz1b9WUj96Zs8548H33WqgiOXDBCbWJJdHRt+hkLA==","shasum":"9e6542d2c705fdbd96af30213caaa9864618229e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":99400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvnCRA9TVsSAnZWagAAYhMQAI0U8JHkB55FPDNb8b+j\nZt2XR0vdwNN+1sY0N090fTuFMTA8UwfttyYZ2a6fe47OMBXeS9zt2hPy4ocA\n7vFX8R1mb2ZPlXwhBui1K3+YUiCoWbnbNm34qBy+X94l8J52jG9KVosg2Gsp\nhlr6RCsC3uTwnQaygzwNN1BGUpruED88GpWmWhq/BdtruyrAy6SXtVyT4o0V\nqf/nuErdMjhWaKZYpuK4nkIWXY79b5e/FRibUIPzQlKiOSMuDUCB/NlSl7tL\nV1B2UbkZHwO82wFryBpHEvWVctA4n6uvn0eEYfZbX/lD11/R2ID8TgLSS595\neBsnfa/jtykcSvz9rxkwFoS8jG9sUPAhcAlGauoYD8tsLw17yqKFQ7Yz9Rx5\nwADcnoxeN66mVOOrKPluxOm3IYD2xUzMlLlCkFabvtJhPlJGHAjOga9vDSaW\ni5EfIi4tnW6wkGvTGT+AauV4TWbofae1iY/Tx7jY+O4ATOoaGWixvyep2Md0\nl+ByZgWydUNTJRPaC15Xdljcww85tRqraYUFTCZWHB44hBK7gmc132YEQg0F\nyThjR2keaUStMUCFgUJVdISgsq5aBA0flAYQ7NjwyecV5ydOOLEh+EWXOTKz\nNS4RAZZ6JfJzkJvNxUJuGqjlDX1BwSaJVpiFAPObjSKu+fj/9W3Oa1+I1hgr\nE//Z\r\n=nsC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKxur6NS7ymV25K5bteY0E95I2OErfI/JwI7/fsXmVjgIgdXwux20xwCzY3S4A0TBU0pIyNPkbKhwTIxNQF2F0Gvk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.eca1a610.0_1587678183435_0.8187923125339518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-ripple":"0.15.0-canary.baaf529e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MrarOrL7i5ZTDkdEVWYpMdpGo6i///XiIh7TfQJIHJ8dbTyP+u9UVgZxsWB7pIKD/7w1E8O0E5Iit8AYUePDoQ==","shasum":"1f8a01d3170f71d73ed0ed9d8fde3bc484e943dc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":99400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpDCRA9TVsSAnZWagAAzzQQAJVERVYvV9Bg+z4u5NZU\njjQigUJbnd3eQKq4VmwH5T61v6edYIefcbnt7Khq7rGGgLiJcGTwSj6LILsy\ntoWGIKKmA4zQhoHgdCUl1vfZcWk6iC72R59/cqqm9nOBHdMHT5Ou6ZRlyg1e\npubrwoO85jInnQXrCa01/WargZxRQp3ga8atd5iX18eZCtzdLM/TBJd+HJ/q\nOq+8wnCTUSXYbbW1l1Hiq5GwRWAAxUeYjD0oKE1lXlGmIzIhrW7sQKRBQozk\n+8MX/vKHijD5nYgdrA7TFpz6qySJkXpCxcrczoKzIMgjiLhPNGYvWx/XMh7r\naO95+t7+ImDgzg7WV5p4838H5AbcXDpXKZYQibkc4jLBqg9mMc4zI+xWaVo0\nxALhp8Lj6yXlE3jPjunJeEqWcBOtRvsfMbeGPCHJHFcdOz4gN30lbLE8kQfi\n1feTRbabpSQqE90kTbY7AQWvm68eJqAI+6DCctr9X9RZaTRtyrFaF0y9SEwI\npJqBbpn5kVFldBz9lAs37h/wYv4cN4y9NcYMDYklpUwcyYJcZG3HfnJqUZsj\nqQG0q/SVee6tr7J+HDoEhS5ufgkX2n7vct45j3vW402H6/f0ovcvSnxfHtfF\nLl9Of6WdD/plcDP7zUSdZeP9c8jbjid/eNon5/SmUDbnV3A0Xm6/lyuxABFG\ntKFi\r\n=MUFR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDidVuNCxi5EVKwasgxsLRC4ISZJ3JEmT0fXxPApvVI9AIgQubr7taTUlXxLkq7PHViuKplwCWmcbydb4TVrBXEQ8Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.baaf529e.0_1587681858471_0.8902769242786652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-ripple":"0.15.0-canary.7a7992a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dtwLjCpNQDCmbDdSE0KcLHqhHU9RKJlfbwtt+JVoSEs+V8Z1RNjNkpTlRYlo8RgCTqscZLaTLGFOZRnE4K+jmg==","shasum":"894675499b06e992e4e87241e627c2362f56bf99","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":100405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFFCRA9TVsSAnZWagAAUPIP/0W1ubgkVO+X9RMrzc8f\nm08/4OXMgNlCyRgBg1DcwDH0B6OI4b49bZdqKz52UutpuE/s2CMjm6/uGG7p\nCY6EnMT8+6rH0EHtQJ1vtwkpx22Upu98IRrGS2AvHJN4LjpFx2kDk1B3SfSk\najbBenhpLDHjtrqx3Cisi1wvIdzXeo1GJYG+LppDRb7fJ4rlUhU9mEu6uBgB\nFzgoHWgeanv/GxkJrIPeV6aKC3jcGHn2hM3d5hzkPeHvo3HZlKqwkc31b2VM\nv31F/Zk90KwxcQ4I0EEMQ7eMRJjFhkoyqVuUfFdr01nVKGB1JeT08G3Y96Ny\nhrRIzMnOQe/1XcdD8vYsXhbZLeee9oGlQNpl7HvVA6Y8WH4EINf2+BCNg8wu\n1L04W899vcJYowUAhdiEEZFqBteRsYFAy4lDWV7UL4/zsXFQ5rh3Fp2EmYks\nYOWAqptmxem+Rj2ZKkbDMtTpzHBrr3CfWP7X/j75LqpU1XngdY3v+2pklHJS\n9WnR4r7tMB4AF+di/ArHCBje70s7u0WK0x/VgE0Dei6vpDq/qTxQh04XKvHO\nLlWKxudbGYX40arSZS/oY+vIWyZBMR/YeUaYGIhX7oH5H3Y0AbZnwVbwSPB/\n/1/uvE4DEdcu0jR/flj2Qpq3Hg2QsrtQQG/u7f7mipc2X7Nm1+YKb8Lh/9oh\naR24\r\n=7qEl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC91FiL+qWkIMyULBDtK9iBCr5G0BNjsDGyjbGgEJnejQIhAOLJkgCSUliHfl5z4rdaRq9/v+eJ9PSQCsaT7+t9eLlV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.7a7992a8.0_1587683652771_0.7533573300265823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-ripple":"0.15.0-canary.1150d64d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FVfWIRlmPtjVGCYgmRul02gGY7trH4oOyyWXe+w4GN0xVbfOrxSANusIMW8rnj0xX2baNpBGWKJNM2tVJVmNsA==","shasum":"61fff5b3c6e86fb359efcc14e25e7dda90c1f240","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":100405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBhCRA9TVsSAnZWagAAl4YQAIQIkxZNFH1nmylE7Z5z\nz28Z035/nD9KxDwuu05wVIhFry2629tr28yhBhuVgueUadRwBlkwa593nXnt\nxb74ZOpQYIJsw8P2Cxzm/w0jKHtru762nqAWeYr25mouFhObmw2sE2PC2YJ0\ns0vUkeYmiZ3wf4GvhbXXey4FvRwbiY4dmezYBQk1oOZz1AeP35gPnw00+tCg\nDL9Pe3Qk1JtjYKccJZ8b62Esu2nsoXT88zW7eu30jxj6QNqfOsbOGNlPGXia\ndi+GHCPc2VQ8XmJpXyt5/KyWXb9MtqGl2GvPr++UXeliuHMeqIjdPBLygpJK\n1G8nPPyYf0YcnEroAI7KahxYXfN+ixFzxOe2qiTttLczHr1bQYazM4X5jok1\nPZcePjLFL226Nj9AnZHb9KCg2nNoRhrvSs3Kkt2dVGKkH5/603i5sJix2zCW\n824uE03cjIyApdJxvKyTz/MHxwYeleArUkW0aeFrZlwYAn2yytt5QwdtvV7c\nuib8HA1HTHHi7TbwMedEWrYZq08e9M5anUMHAr+B1dFvX/7nwgXAX/kMzzaW\n69aCC+pOXdUv3lOwKwZrB4NjGWArTqXv9ZdJU8e6J9LbOZQIPTqIXn1KJ+Hr\nVf/ueB99A9cGz0sjMG95atAW2kHyuvD4eilYgi41lSo3UgyXhcyFcKlg+e1p\nwdui\r\n=C0qG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8x9f85yrnXSHIDvSE1rmoPtW6mRaGk8HlWGpjVJEfnQIgR4nnUyOllF8Av8X31OneeKAoo8JWVCGiZuYArXhvvrI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.1150d64d.0_1587687521342_0.8192388013142937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-ripple":"0.15.0-canary.dad3f828.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pZa8XoqEcYP4ICEAOAyQQVfoWAhkEaq+/XtfHFGy63kz92VDtQ1XHcZ4GBsb9J27FvlCJvkdgC1uIOpgdYk+lw==","shasum":"7d9d6ba9dd9c770c78d52c96870dcadc272ba769","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":100405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eJCRA9TVsSAnZWagAAj64P/j4vomgKwKOxw/ajJRNH\nnAV8GWO4z0LF73JrCbNsKpjYeewfOyPkgF/uKyWYw2ANSf/IcYH7StxZIip8\npsAeDi9LmYA11k5wp3n5KHtGQafNNELdrMDYkzcS9rpHtiknJ+6/moneAbXn\nnglI2yxy5Wwu6qqy/2gS9VqGgdGH7o3Jbory9pbJUsIYagEFb2K1nXxtEep/\nNuiCAQZmPTBcY6TUtjnzDPKJa6emu2lmCHHVoN3oMVKfd7e/kA27z3btTxrB\n7VFYXhGEesqjoKeq5O5Ly/DQLIW7mo+n9Zd6qfYgg9x0uE5A3sIlC+e3oHVh\nJHFkzO/As1wIz1ccejTg9YaAz1O2ilQK2b6zt5jOxLjJjEKQbsShkzwlDBiK\nJtLxZkIG839nc4m8xbE3cZruRKRrElgycd6ZC4qgoRPFo/A1qallmV3IonIq\nqAysr0SABF3kvLHacZ+W8F1w3/PZ8hTH0ny4bGqA1k1m9Ap6m6iJJuAS/kxx\nxozpJgiRDuo10iB9GbfYGs8P3ig20vi4qXq17VR+Vw1mcaj4frDqSXywagE7\nXVxENGGFN8m90dFNu7P8KOUt6BU1Uo+AL21pseg/PiAgsR1zZzAcTVwbhoxv\nk5JsIpBuOB4sT1p10RfF+BnDW8De5+vGTxF9MCFLa9si5oIlkNkTgCwK+GjM\nLSvD\r\n=zcGd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjKI5h4JRB77JLHRwibqUwJJJJEh0PblTxXm0uVDIaeQIhAJW2pTUb5zeqz2NWVlP+ZY7MssjGFxBPnG1PGQ/zAS5r"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.dad3f828.0_1587775369056_0.4241319762721609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-ripple":"0.15.0-canary.1bcdb47e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-O2qBvwl9lL46LBjHrN8kL0txMycRj3WoAFrwbhEmMPmVpNc9BXsL8XIgY22NglzbHybNSyjU40zDaueNUM9Tlw==","shasum":"610fc1ac36da18d23b55e7c7ee6d5f469f728409","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MNCRA9TVsSAnZWagAApjMP/RgeuMnRtmo1cCYxSRSW\nQAF0jPaXJkTeJXw26PRyQOPKD7gO7dcg8mK8mSY8qWYcK1azhs6M/M6ROqHD\nXNbKAsVMyP4RU6iJsoMPa3XW9IF9PBRBV8wjFtQZ7cBLju81jwKuhNmF7hP0\na8SaHi6xzjTY2v8Eu3NhPDRaPqP/M1OH5DYSPSB8dkVe4QBgjUYuYeK4AMly\nH1B9vhrYdRstbSyJlUCtcu12tQDQ70/N1uIHcxTkrlIe1uIaULeIKd4RY3qg\ntbYd4ZftS0c49j+4wbJmQx0fvq+eau+RfcCCijeN935uOij4nCj7ZPezhnv4\nRcOUdfl4wBs/S7XAHOeZRZL4d0b+PPfpQ1JR+N8/kPRdp3mbn+SC0uQe1Dev\n91jvq2zl3LsJpHZI3FLLY20WHhVIGjNRTnCKlmwa+28N8bL4MK2a7Qa0CJj0\nwPcu/BRDsSJY1iMd2xBkVjXxlbdYBGZ89xEmwdlp+vU9rtsoqhWoH5Mbns4U\nhEvk7WesKJoDn+EeZTu3OsUWu7OvlMaeAF6MI9nfamtmBopOlQGKOwPdMeN2\nyYiWWqLdwTgI2qx95+SH7CbgbGANLPHsckqgjHE742IpH3NR357QUbPmPlnb\nvHYaaVMYEIgpJgemZzp+9Dbwlxq4WHgu1trw8pYXPCsbJGdhWVWRzGvcH+CF\n0zGU\r\n=Ut7j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/SjlJ2D83mizxVMXgOkOxTXKzBrWWZJSS4GO1xNBFZQIhAL5He3pMTHXq2y54IKhB7wu5TfTrY+R+jlsJbNyXOhDq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.1bcdb47e.0_1588036365152_0.7789592368035254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-ripple":"0.15.0-canary.86ff1b9f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s/2E7UP6vD84wAMBChHzw1o40MLjAjk7T7rHdyCdETX3HRnw4QvCARpN/UoK2J034VEgu1VGM7/UnoEeMtUkUg==","shasum":"16eabc3ab5cdbe05c45c14667c250c6adec91ec3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5szCRA9TVsSAnZWagAA3nEP/jyeTXWCL8O7JXGEyF12\nlPVob83enliDrQ7FEheAgRSbV5VHkBa5fbgbKexFjLRBRl55Jpz/0PoabtWm\npvFF/qB/UfAZrEU5HRcLNZxvNzkRA+j1GrRxpOpCeKw1aMKINqnwbsCng7VO\n5wy+gSLzdvkWabFxmKBNl1IwDtLOMOxbrHkiHfgy/i9411CTtgROCExjMjor\njnXkPTHme7ai3cDbTMPoxCmFnRaOy3RqjbJpDWPIwxNupV46fVi88PnIJ8Ih\n4wf0uZMgMS5Ef2NreuYpImbMHxRSVj/nu8msONUfr/E6Ki6XfYnm8gThb4bK\nWWYMx4OYY4czZyv200TH8HtpooqMAynGW2kj560vJWz3ipUNSLmrSMGIByHh\n9AxD3f/M7ywSQne4Iznvb0NFB+yByJTbD462ypENzcQ1t8x3aIcUE5gcUtWC\nrTC7/Tcxvo1lShgPQKUcMqXk2zFrGdkNPFPhssiwBVCL9f1T9JNU7iyD3CAs\nEch58i0sd3Pic3iCrFfO56EQ5UUoibeuLTc/5FZHTql6WFUqU6hf6FuXzjvl\ncLpthR/mfUcbEjAlQXBIaECcIF4q/nXOy0rOY/kKWg/q9zAvVu37koHCSOI9\n5A4bO2wKhNgRY58h2rugyRUoxwdf1cXWcVZCovEjQNPdy1FdxOi3/4lKCpuS\ndcNw\r\n=/wUC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4KsV/Jl80Gi3QPQXn/gz+r6YrytyIydmoMAQxi0SDCAiB3IDQ2nNCMz+Es0N7ojkzSBlTUFpJv0/Wi4zKVFiqvsA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.86ff1b9f.0_1588042546839_0.5470050902811676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-ripple":"0.15.0-canary.54a86b20.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aIJCaqE/2KQ1TymrqBAt8OxuNQ/h0ZelIPNjNRo0lVBV2t7OaCy9koRbmWW7mj9NJltk8fAZe77WX0FrqA9kiQ==","shasum":"f06a64dc8a3a7a1163520ec0d740343d013faea1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BsCRA9TVsSAnZWagAAhIsP/iYAtZcgTsDmTsRIUMUi\ndHtDlxVotpzpavY7QDN2S1JQfezoRvqiXCT0kQ/ppkTCOcVPNlHHs9ztvCMx\nW3vIYcSXemf/5MewsF8ogTW1Ry7oYuq3VWulhCpY5zxdFX3thtXejMAZPddh\ngLVmY/VLVJf1YI+0mCCAa3YwK0/g0PIahq8/BmFYJMRwx/jspxgW2jC5Deud\nUpwTLBjmAfl1def+Parg3kS8hFxw1khypRCy7yGykTuKZLjIsdtLsYZkHMog\n+5aU/8s+BDZhfj94nPj64i8gjoY3bTSHTz9JXl8Wwv9Q4PTxcGUy6RMWHhNA\n+ib1KKhDbHIRbexdCePpHRJikNyW7YAqGVgsNtWPsM066Xk9f5U113HfvbsL\nXQHCphy7BhJyuKglu2c6xPAOLIK1Ty3Z2/rgyGbQHzRHAGLIpmqW/VPPOq8T\nhny6jYQXR+NXI4+HKFmea2qM57cgR0r5jFp4nyTjNnMT5lNM83FhCTmaQdmN\nCkrMqm+snP0rj9CRfxHMGbnTO8b5A4BHu99JtnZ39u+UcfR2eIKR5ed7Mz6a\nMcYlext34B58uAd3NFhj1I2/m8zeuIwPq1Pw1f1y30b1CRVReJ84J13wiHPz\nDCvqOrGGVUUXJ0hXSLSPJtZQF49dQG7QcLqSLN/PT/Q7AVkL6yM2TQN01iz6\n66Pk\r\n=izRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqNjZHGMIfyUlMSXnhacoB+7fDQ0YAvSIiaHUo3ZfPswIhAMDtTlYvW6v314ZY8/S34H2+QH8Pc8UzqvMuFUd0nJUS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.54a86b20.0_1588043884278_0.16811815601330493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-ripple":"0.15.0-canary.938fd24b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZjQLQUcX9e0ojGxjnStMa2eM0bVsZelIR+HdrTqd1mBjNKlQk2weTS87F+pzAclLtldFiHIBXbs/55HRLgCRuw==","shasum":"e3fb15fa5f11fb6cd7b4a7afe74c0248c71559cf","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilzCRA9TVsSAnZWagAAackP/1K7NFpFApc5Q/OFcVx3\n/Rm6oMDm1ow2nhz1pnB4QljTAO8xKheBkMQFDbG3iwzzfmHBNB82dyCWVDJ3\npzAdJoi+tVoQAaJ+M0TBL5n9rNL7XxBFGOmWZvY/JHWVDGGQ22HZlM7tHyXE\nwDOvXZ3fZyBVA2AOfoBg8cAlo6UzN8wuv+43W9bveDb1NBs2huNQ9HT1E8dr\nSCWWPDgku7c6emU4ZADgK7R8PvxSAPObx0AhAMcpH90g/c2XzufDsaY6rc88\nMUgr5dEiwaAKaP/m5s9zqVnr3kYBLqv0I/Kw6h+TN8eXOu8GPx6SSLVsLBgG\n6ageTYtJc9z5f+ExtpJ3dg190a/tOLOdYPlVf88bOJZb/qAQ6JPK/rTCvy0Y\nKI5UC4ANVAKr7mKiNF1XDaLU8i8zIln4sS8cajqqE83INivZLPRYZteHlhTY\ntTZW42YruvsE+puV4JoCQHsMon1pnTcvD0NqcW6plE2nj7EqOl1u1hRcytnh\n6ao4twj8Y/Y6h56STy+tiguWfPs+Ji3p9/wquCuuq8sJG0fjlsn3OC4PZpGW\nm+yDeFGV9g56AFu5nDVy7N29qYlYmA+Lfi1qlkmz0Z0rPpIeyUviixX33Hy7\nUbO6AQiy65Z+RxM+NFdniSOyMabmcyUk73a684INv2TTNWoAw7t4vIcAirMs\ngesG\r\n=Sj5d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVL9AhUlenPZBj8pMVnx16wWps6+cnzhJafEeMQbWsIAiEAiHhy4QaKYmelJG0nuSY+bBGeg4J/NKW3V9YP43qB/Jc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.938fd24b.0_1588210034729_0.4760862823710328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-ripple":"0.15.0-canary.39e9a008.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y/1WJvxWz5S2HlUNgtIfX6tlPiymLRzesYbc6X+8Im0uoU6J2jjBPX7wsLAkYGDf5gZNntkbXmkziMZbqoKaqA==","shasum":"91a9fb2eb22a106f42e52c969f3ec6e96af52e16","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRJCRA9TVsSAnZWagAAm3QP/2x4jLDFd/4BoagnVRIw\n4JJoGhAokxQNETFGZfOaf9UcZalwbaPU1b0Y7yIlK6OA/anM3XFZ9lHRm/rA\nbZj+YfZ652r+Zr3K8eLnScn+49SYFtFMniorqrJpjvpKBc/AvVIEzsUSwa5j\ntb/D1+IdZKgtvocstEQBIqeDDKepQnS9sqpGNKZggm3PuRWuSlgJFTMSS1sR\n0CiRXe+BnC14fAbAi2EglSoyVb9suf5F7oAMQZAlh8v5taK5Mu/0UtZU7ZZD\nkFr7RU7uH7ll9ls0jcQgCOuBw/VLzgebox9xOiIDPbuZPWFAEbNKoI5IW69W\nwp234JAWs+eR1D35A8bcZU6VSMKeELT1iGMXIhTCI3yeHtyn0uvLf2WJrlyA\ngEaRFV27aw8zyvxH8xvo6H6cCipApT8JWWkCq44kGEueomqWlRkqhIcG61K7\nUDpOawDCpTWqW34sCMt6+/z4N6cJVF6o2vlUFrYEGv7TU9rg4bmDMaeAzP5v\nzaMwDH6NDIAp3wtOuDm6QhOEwXPdYDEa+RruBRILDDwGS9F2KmR85y3L9cuE\nuB5OjFW70fmhmRPdn6AOESoSA9tLnkZgIumF+M5u3giKyIVBk4iwNZcqO9j6\nEgGaRbF79q7qdnKjqRmB/b2KG3RlB5DcUydWiAUeDRlp7j+GXxQrGapYo6IG\nqOhg\r\n=PrIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQnYzp+M/VIeFkhDirN5tBmhsRJfLnTsYOkUfgmGKXOAiEAzWyqy4wfjqy6RfTrIeMYC0UVow7k/Gwf3Iert+rjFjI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.39e9a008.0_1588212808612_0.4938678598383175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-ripple":"0.15.0-canary.f3b365de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dx7kIxu25x9+c6CDk6F33r8eSOwx/Xcj9X/Vxmo3kZbFFsFl0vE+L27aCuPU9Rwyyt8ycZgBCy+3j95T+ULAsQ==","shasum":"e8c1865d2f49c4043198099237912c9acba7e53f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovnCRA9TVsSAnZWagAA19AQAJif4qQ1D6EmQZcY8MxR\nvHgseemHPz5V4g1vWDQd2vNR9bx/agVd+0x7Zs5PDpy10EwVkwFyS7JjEK7Q\nDFD2gvSlG1Lkup5cGMgZ07+cMTZlS/uW5/O8usEfjogigu0AiiFimyNsr1km\nxKdNvRbO4h+wOlPqzyT5Fgczs7LqfktF/2TWnGp9bpr5RRX9/ME8ViRqqcOO\nakCbMucPZlwgcqM5B7oSPL2gaAEqedaa1SJHT4Na3VRQscfZaBsrtprW2Sx9\nO9tyN5kQBgv+boTPH+bkqeurWuuJOksekvor/glFm8B53USloNXPywxYF+TR\nLY6tuKU+HEXrLuMdmf2vhwqx0ZESJYQvHpz8sFIeoR2J9rfd1NA76IP8pOX5\nCz+zxfJIwrtBdWxaWU1OYI1DHpTTY9ZDqE22BRkONrBpLTiJn65uABFpZ7vW\nqnS721FY9CADmAlp9SbFRGCSh5HGorvfPZeUjoDYlmVoTfoLUx3NIc5K2h1P\nB0Di956yC7jzizG65OkKw0X/GyDoE4NnY6K6vtFXj1P1BWxHg8WFW/GHPkDp\nBZ8QYQRleuCeiDsJD+e13F0wojnxivOUhMGTJea+UbjXnlBLYeyUU4uIOgko\nYy7s3NkPOgojr8yZP7wJ5TSkKsI2Vkn4VIcnwMMGRJiRaN8xkFuI5/teuX8l\nVi8b\r\n=/fnh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjdsKSu68a36qp7r/g6o9BAVp5cjMkMPeesjBy0QuLewIhAI2Gnw+W7J/RpR7/9ATi23rxv9FV9xVwfF43QZO0A2b8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.f3b365de.0_1588235239116_0.45423322602921945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-ripple":"0.15.0-canary.cdbdf807.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7+KLpScXdI3/Fkq/S8Cb0WtV5PAoH7m0Mb3OxU+nOuYlwwBRh4aDXdgSPvOed5D/EA0qNNPerKHIu+lECJ2Bzw==","shasum":"d7f0453902391b7516c4b49bcd7f8ad53029fe5d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2n5CRA9TVsSAnZWagAAFQAP/iNpyJ1dGqDd4lfLbeB/\nvGh+1OkAt8b/M/HzqvxzOpGvBj8+hQSTLCnUXhoHbsEjrtHjhHdJbHjIrthy\nKZfXVsEuHRbIqaG+ddaDt3mJzXlEGPAeEDKSgyrjlLW9LmtXQHELbftiOxwr\nTNz+B9dtQVfy5Oa6Kams3CeUwG9sZ/OxH886RVTe2Wk8bXZLeT+qfTHNw0Ja\n9jFq2Z7Y+dihso/z0fzbMsQqtI4ejyFmFwVsSpUc0Vh6O0XEP67fE/X3SCay\nKY6j9TG/Ox8S7W6OKSKuZj6YgU1aF+RKveJEPk799BY0giRmr4eTE1xJKPsP\nFkKFhaEbMYQrqOKTF8j+y2pTZS+0PjGn5lYf2TlmW044sfigfTFKqQ6hngRc\nl16eAt9yqmrbCdBr7w5W/g7Ap9QgeNgaZWzTJA3PH29DSuJka+eymNhuQCF7\nUfrofB9cFPzitWw2H04/S49EWGjffAPI5oVGKWrxTEkVxUdRyd7Zra3jwFBa\nWcVtzbFOwlnNDmtDsbf+22nnmSNlh3hqRPiZC5q0Pqg83m6KyBCu4nyNnuxQ\n8FSpjjn4smpGdLQ7HVt2s5xAoNHvQVpIlDXojOT4mPo0e7QdeeH0ziLo1r+0\nVhpM5FPsFU21OC2r6xeVWh0lznjBJItki5tipKg7OEuMnm1Ke36is8RfUBwT\nQMrO\r\n=td/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0hh58oENb++iseJdYKwvr7Hyb4J2FaWyJrB2GBPXsPwIgdFpaMaLTvwgzq1NGLXPDjFoMYvVTTmE6zgT5unSaVUo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.cdbdf807.0_1588292088976_0.9206023360010314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-ripple":"0.15.0-canary.9995ae17.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8Zmtj8F2U+etbEZsmMX0xeSM/g4xPpEEGEHlAVniUEnOfQdU0kXsryrswz8sn+vfqe0f6/ocDrsKBZcEg1qQVg==","shasum":"46c7579ef903d9a97799bb8db46c28f095788c4f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4xCRA9TVsSAnZWagAAaMgQAKOKro/MEf4EMxtpuvIY\nprGgQvtejcdHYmhxTnzj6EADwFzczdeQ400OGUpcrdTuEz8UlMPjiLKyjvq/\nFJe20OrqZuKDNnOjI5mgBxitfEa98LDI1kbY0JwMG1sb/QbKWBQLVnvdqVBL\n5FclL9jCT5eS1R2CigQNE+YTxLP9XNiAfRgOp9jwlxrleJKt2OuHNEsjvPPK\nj2+vV/R2A+94fiI+Z9LMXaNaqzKSM1gwS4UNUsUFxZ62TLulBXQzJqnqp/AY\n46FOoDxX8M2+2m+MiVBDyt2dG1+AxzoRYDKjw1zs5veL4hrvpy+tKFeQgacC\nAp1U7756sinB4cOEhhTnqr/avcbzYcS6+9t72CnaO7cs3nSvRt9VvuBapD8U\nhLBTw7ZzNO8f3o/JT7xTLAiN8LvZnFqdbkw4TQQtOQRNx9BzE1cbJMySYsmP\nbtzPgpboUadv4Ib0n1YdGF//bYHM74NnL3jX7yqfAS0sd1Kp+9cHujsQrmsn\nQi+2dbO7nK5xHLxG/uq6k3zfERPNLx0dHGQl/dkDVvoam7KbiFgeCacX0zb+\nPtljXb3GdQlxtedIVTuxXPjv8xzCr6R5LwFj8z5cfpiKZZ5bOhIY4yXWwmXT\nsJliMU1lGb5ryw1zVTFItRKxa89cWJqYJmMfAYubWLwaWew6ZVMnZQcktTCx\nPl57\r\n=/6FN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZBasaM3es4ZU4E9ZmNbvPCJLJTqa6BL6m5ucuRqNokAiEAqgb0YSFrM8Mvv0M7zwFv4g8wntQS0tyB2OGOiO5HDlM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.9995ae17.0_1588358705020_0.37286933456191274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-ripple":"0.15.0-canary.457bf035.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7HLvlv5sfaTzJUrtwaQrFUvBTmNokHJxv3oX+REhVRl2s9nSaz8so0vxif3a75eSU/Hs1tKk6vXGTwSGuudBFA==","shasum":"ccb5bbaaf3bd01fa320d4ac2f45e290224b47605","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuuCRA9TVsSAnZWagAAc+8QAI2TTdejRf/6E9YRX9gl\ncXq17u2QTuOx01D/enhenmP1f/jRUx7uuXb06iI5cSUf8LgskALQJs6HSeU0\nJJ5nqWkiLrkGoI0kKZTEHIBx0qz78lVHBQQz350cUJJe1aDPwyYPny7jQXD1\nXk/U9GX7OSpk2EFgfjDWDAf1U9PO6PflolhfcQz/JlFv3BD6MAXiCatOGBHw\nevRfvKzcQJW93ol/y1bjZzbAux6IG0uY7ixGD9tI52FI0JY3NdFM2V7ixMSN\nyNHK56nC8BlLWTwYjHKi237qejaFHQmBYblpnyfIfyBnmq9hLYLjT5J66fMs\n32adGCgj/nd7wUFp2YpDzJe6KkWtkY+jw9gaER9FcU1Y7O+ffu48Q10QMWoA\nh2w142Rk5VZQxnJemtj3m7TLt8D7qKDwEAayn6rI6xQJu3JsJDnC9VcFlYHB\n8OgvutNnkcMs+7+ukzHPj7QBWX8hZ8M6UrlcBBZKQRKd4Zs21Ym6VLHc73rw\nbUEkZV1vtvVEHZHjt4Di0KJfzOssG5n8HMuaqjNpAytHTh+fz/KHKa7IsXES\nXayND454cpLoD5672iQ7g+DHbNYjliV7TLbqcbrzs2P2WHzJ8Shn9s0prc1H\n7KTsVLBpGr9rNl6K+aM1r989opvmOVsCt7tx3vd8rcCHkjPMJVPNj0yZN9Oh\nkf3s\r\n=ukzH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6MGuKS+H2mu/9GanrZ4qyLPvykqY6X3mWSNfzomOduAiEA7EBAUC8Jz2fM6SiH2rHePm+a3icNfrrDrhtjuKnSoZ0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.457bf035.0_1588366253696_0.3697718405024808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-ripple":"0.15.0-canary.2381fd02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vKJDILGA6VDprEkQl9aUi/LyTZm/Jf8tkxgrPYrnWB9sD6d2h/jVUHMSPnEtOrtqZ4KcBqD58bwHK1wSJPkcRw==","shasum":"bbfd16e218fee9c8ce02a3c67fff343a5e5c4e53","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPOCRA9TVsSAnZWagAAshMQAKEJMmBDwMoJAOsDRQZN\nu+uzSBZpi+xG2abb4T7KU9wNQAi2oWk7UBOYoB2IUxPpd4HzlHUuB6U/bSe4\n+HIUpMZFOcTK33LWxtHh7aZ40EnLfFGcTdv73sF5X9gEy8DmGCmhgnAKhRP/\nf4VpOj7KcHRCKfk8BYgwu5MigiH/WHa6t5TCSng+Gy6N5L7BuS38e7J5ISI+\nQHUn645DgqruS/49kn2r7C40CClcviZJxGBBYutHA1xvySDS7vZwrrGRxazu\nud/jT6RGDSDlzsNL8Wok9AD+bK8BHYyXULcWNU/tP1HqD4GZGSWd8rmw5Sfm\nQz6S7+/88k2PIjMpoeYd5ua060F5ursjDZL2VUbjsPHeRNrUGL2IuSf2HxnB\nZZrfzXD9A5dk5YFB9D4pHxt1SW7w7L+i3Uheg/w0wKG8n16v8cvDSjG2N+zw\n2h1acobMcJ/UdKHZ0syL09d3z9P+PLTn9zWELJ4EXUzkWWz75jsZu9Bpei1B\n3wMCRIQTo1juA+5WN0ar8TMjwoQL6gkY75Yn9tBNNFnymav8CCrgoTEzLKbK\nICftxTwREccDXtOo/+e3BJ0Woog8mPg+NifNODaVoDfIXuppJ2AJoEo2jJRD\n9u34fG8DYB+S2zrLUO/sT/Xt2gTeHpvVUeoGB/X/v24tDu/uJ3SmtDv1wmaE\njuOr\r\n=NbPz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNdyu7d+sAyIWX86fHQdDjFwpEaGOGvDDRxjawX81RoAiEA28zPbLHh1kV7DTO6L9t7BT3m59jD8AwFPxgLpodmYW0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.2381fd02.0_1588368333913_0.11485128480717832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-ripple":"0.15.0-canary.b2ca9b57.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Il0uEzV16x4TVb1W4FhxUMM06dez/fFjMY2Ia8BlP79wZ6GXBTb0HaXuIHfIyRUs+5QD0zjMWnKaX9aI5p1uTQ==","shasum":"9306a7a91a8ca1b474ca3624f2f75e834dac4f6c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZHCRA9TVsSAnZWagAA0AoP+wcR0vKaJpYdbIDAsrPQ\n8VPCgc+23+qwSM4hjtgoSSjuwa3Q59C+O8dSHGith2dxrVv0iWUAzeBvIxTk\nCQuxvRO0Uu9Fkwsnm+rESwhSYeWC6Zk04Q8i+jkarvoeSsKAm6yM4glcw692\n1GrbtrkUGROKsH+NDiw4/L4AfFaBVAO9hoBgw/xkE/UCn1Vdhjk5vP+vkWL/\njUqQEeum+UmctCVLsdWlGXOMIMpiJhg0DGGEOgJoCpfuTIpEqsxuyYGjyUib\nBe6IsFHk6Sj9XQGXhQScenJJEOW6n/it+FLGiXUeBuCOGjEd9ZknPUHLu2xl\nJ+CEXBLIXAnF4vIRqFzsTZw1NCwVTf6kFPb/8PY2Lh7ezcPbLxSMpMXONlWW\nzQ0FZDtaOgGR5ccgGRQ+vdra2Qko43rG26ODDFq6I2wW80+og7WKL1DfVfG2\nz2kUKk/g+swKYvDECNHtF+Z0UkmajiifpB6WppPcu2Cnc1lRB5mFRPJ5dmd5\nTdgicO1qaK+qsRrHRJ3FPi/HbUYKXEuqlYPlCmMt0NHw+Lrd9IYANWB49y72\n4digCuQfujw3kfmSIiG0MVg2iq3I+9E2mviqf5VjW0TinEzs9AIUI+8gZQgJ\ngdHD3JklHw1jYPegqK1exfRRkFMsYhUzD5+OoF1K4IxfjevI3zBSBDTWOIEi\n93T4\r\n=cIeU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGrq5C1s2bMCwlujMW3pfIekDIj+D+7bmj291TGVs/igIhALQrYdMq00zSrOgJdgqc/LyFm3rzO/HCS/LtI+V0UDpM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.b2ca9b57.0_1588368967198_0.9058915762834407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-ripple":"0.15.0-canary.b2b088e7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/SdppFcctnwWYbRWeX6wsqaE/5ZQfrzEdboF+oDkphXU1n9dzskQt3DIzohHRH3AxyLUq3KmgTcru64pox8q8g==","shasum":"51740d4b773834652614f0b1698a8c03ec5aee3a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPICRA9TVsSAnZWagAA2zwP/19O8rSiYBX1B/wBCT53\noHx7PQKFnzwLm0QKiURsWt0uxOiQTUjrAK9zQWNwbHW5LPrht79+4crd2dyG\n06T+jmu3+Yrd3yWq9NlJFVU91aDkA+ztkJnCeO1vNGXT8V5vQPJvsGDTB7Eh\nbdD2BG3iXrHApwlSFzpo8F8hjmPYB1jsVUqdOYJw2voU2ttsOGItFYEN1M0Q\nD2Z9z45tY7Gx3/vs4h8vpEkykhB9QuBNnkr5JoxyD65evUdpWu9IQhs1iKDw\n3xVEajl16HdHuoE3rHfKJbUdmAmMArhOf6Xtb02FfB2blNzVl4HB/dvTeYfe\nsbZ122LpPeLthQnR3yTdC5UVjVrC+gwqJFTvAtWwb2zH/KK3zb8Nu42YHW9z\nILhUKq9U1gLRxfCVOiaBAfl4hOnOytMAFb9nkYor0hzaPSHJI4He9KII6di/\njTKEnNzX6C/Tik/8m/SOaPwtIrdJQ1zmmTbGnT5Z3IYRB4ebR6S2FJhETGoR\nGmIs/YR3LGc0zLaLfcuIG/2FtBsdKoMCZr2JX0sWdQA8foGi4EaTiMvYdgDX\nLsbMpmbxyiR14hCGG11kftpCraWnM6Aul1Wf6crxnIgdA93E7pzD49Oia7Ze\nwJzSearllqgBTQEqDEWFU9uz9y0i6El6lrAREXmduQFxNUh4jo6Qq6PCjKAe\n/9to\r\n=GOu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnOzZfiRcHlAkE/pM91kEyogldyRsqIXbdcvd24BzAogIgGx8nbhS5R0QTjFpoCHGoO83f5G4t+D+clmt7DR8eAbA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.b2b088e7.0_1588372423763_0.16367369654304076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-ripple":"0.15.0-canary.fdd8f69e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dHw1lXENPRJf4JV0vsvV6EKLieB2yZGDhpPlh4ADL/5c9EaDLOUCEq3va/bZT9JfYRwtYHwIkxUg87qQxmIhCg==","shasum":"34c593bacda4c24d15591f3099dd1492490d6ca0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLviCRA9TVsSAnZWagAAdLYP/3i9dTYlB0sezdNMuDrS\nJHplstaREP2l0cPa15ch8Bx4f7goex8cWeB06+6VFkgIKHJmKLUulCGfYuyz\n1XC3HauzIqRMfNpNQfHmW9GfvdZaHhrjbhhtNYiI4RFJRELQnyHW6O8Lf0C0\nhI57ksBxcCAkLb2xXOR7dsajZ7s23ua6wlx9zAemWHgSvN9SE3hwTP0QEs70\ng396RPB92HYy0IGZImtQMQbf01gFATsTVfARpXFrQLD0+2wPF8zytRTswTw0\n3D0rilBlXmZ/29CZRNOZuDM5SFsu23li8qyT1jbf/DViWhZHYDU6eTPIpw5M\nORyXX8Ozn4wm9ro/g3bbRqSsIKmoKTdMuwrfBsd/1GpcLKEJ1GAhjJOLLlVT\njBbv+GWbV2ALkkXZNjlSaKVxsRowNxb1xM7Ij2WdWr9LWKReIpRkYI7rfffN\n2XnasExzoKEkQjIxj6+J+RyAI8HO7oxhdjw3xgehebmdrc91jOIDWx6V92rz\nwPvujYxhTJA9xpCysfrC/98+tcZzxUoLyFav5zFPN+AHZXD972VYTAxo9y3t\nf4TsbtNrdl4DPSBHaZAmPJQ0/AaUpSOAwDI6wFA1GV3YFDR/Dz7C4SG/R/tb\nJTDlFvwX7GmbpWsKDc5DP6PRXc1wZeuvfMzgqn9iNGjNsRQ9/p7IirwoythF\n+2WW\r\n=avty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWio9HLALZNJAfbkMGy33+eGU57PhXnYh9Z5RoFOyioAiEAr1eoVwe5nZ3/2MsVwRx9tDUVRShYUESDjXzhmIh0g78="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.fdd8f69e.0_1588378594277_0.38707224661946027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-ripple":"0.15.0-canary.730f45a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-khIwdD6xfcBBAlwcAXYv7TutEBTx8wvrgSlpHkrstVbYC+pPVRjmu7wjRHlHDoV5c/hP7DFzssRxvJZW4mmQ9Q==","shasum":"65cacb0c6e1ebd0e32014856007560e24834ea48","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1HCRA9TVsSAnZWagAAii4P+wcERM8WJRu8ChDUO2GX\n5iAI05s9AlabmRRa3Zr4q3KAyZ5aUCCIEZOEBIp4l8XZhHbfL8Kr4eXehCwA\nbmkI0XWv5wAICeKoWz7Rj8tCWMsSro/TcJTOk4DcC7FCMRvx2uWZrGvD8P+I\nGTDYoAuFQ1NC55BofhIv69ud8H57d8+Ug7McMetac+XcUr7Grdwaud0C7CMQ\njHVJHEUZPorOtLnLoPhh+WeKOIFbgX+GvqThKqNSrXJ/0zF8JFvdW6VObYzK\na9KgPYKfO4J3CtWFkyTOm+5p39chH/yEWnJW/WGDrcG2ObKv3oo5cHbjMhXN\nNXK+ix8fBsSwuQIXUEXN5lJKxITt7N39zrQgwh3zcZxkO8SfZ1UPVngtBfiW\nPJireBueqRzdsZHFcFPtfxkCOEg8LlEHxAY1VqKimJfcSVgZ/VDU/nLUf/xf\n2V+/twPSANzL8kb1bbAwuYhVyPaLeJf0Zf9dqc/U1Pr+xqn4S5vSd1/Wv372\n77tz9bZPVZbs10yoaiPI8mquE7gKa+Ts9JnI1GEeVWo3EcQ6h3vX+nEVzPPW\nHR3wRAAqbhIogYMy8hPc6OFk0PljI7mE3s4rgIpQdKnONlh3Y6LZU+7D+qjL\nT2HHJf4xnILm9rB5ulTcNhc/ykiurqLdbESIrORwLiO2pmJ9AIkLfFfaW/PM\nzfp8\r\n=b/nf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPsv8JMIpU/OgYuowkXi1QrdxKRfo1WGh/jtKjE2fvxAiEAvbxZoIaKbAtYZxomIrMfG7v2Bdm87vMdvO78fbj9F2A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.730f45a8.0_1588538695050_0.8334513513961224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-ripple":"0.15.0-canary.4219bd20.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-R7Q+eqMtiClZTh+DK17i0PrLZqmVGS72FX2SVOua0hs53GycitguwkqzFa5IeBaiVTXRNj5HFU0X7XQ7jEgPbQ==","shasum":"8a558e25dc746ffecf468bcd7d2e2d6102b16a20","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKX2CRA9TVsSAnZWagAAMXAP/i9orlE5NcwFY7SPnJcJ\nxRRZEXCyovHKJN8xlryRzyyQiQydOdf+PFzzMXjp7I5TVGMrRg7uiZCi7jKL\ntOUTASY7vVeTN1JMCrve/8rvPo0ET0Wzh1yrcTdLJSeYllJgqF1Kk5xVIopj\n5y8bVyU2t+Mu7PeZd1s5OTdjDQt8ylQixAJccgbfvZInIXG33pp+kE7Gt9mF\nJhb0VQAmjpwGgZvoJB681Tlt02EmKXpBYhsNR7XMe+Mc9iPuLPM0GzudHacG\n3uToY7uyDehU6cuqNq2U8uaL/NWyo7J/KKMifmYypU+MEDcMcPD9igv9H3it\nn7EZNy3a4yU3NDkxNNxl63bBevz10wAZWZVr+QKn11oxrtmRdKw9XfmHiYKe\nipD8G+lXmPLoWWsPmRPNTYRD5VR6o0+XuHzADyY0gI1aaft0UuypPk/x1NQY\nIbv7YvQ1XNLSkgNbnOTecZig6PL2MPbDPcJ+WiWDfV6uFjHBY5W57Wlh08j/\nZEzvo/IQF0D272Tv/o01Z6mp7GGIS9IbbcTgOlp7YabRg/gQj+eZ+Juql5s8\nNcDy7k4OoiFJdgMVRxwsV9fXIkmimFT7oG7gJcoBCStDIeI5xpL0CcWCzOwm\n1j+iHrmKqGoccDbIOcjMnnnhSusXGdMOEfzaqtbEEGc9jNO/U+laaXkd/fSJ\neGKz\r\n=l6pT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWqJNByqEcERbFeOUmc5aOXP2ItVIGpO4+XCbjNkGwngIhAMWFt/it3wS6CagwToyBuNxW3iAQTPaQgTFAwTykkl31"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.4219bd20.0_1588635125445_0.7071380417989157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-ripple":"0.15.0-canary.1d83cf6d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tjZglWUKcSJb9PB8YdtRz8nA3Dr/JkdjrJ9MXHRLqBO0IFpjBFK5G5qGqW/Wlb9fjNp3SCMYEsr739bzP80llg==","shasum":"bce29750b5c15d644343cf07a338ebf22879a1b1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5sCRA9TVsSAnZWagAACi0P/2Gn5WNpnoYK1427D1X3\nJoF01XHArCsBJ0PWWjPe0keZVEJzbi9H2P2Y/5dh3JtF876eYmAlqHIIS6sF\nK/qZnMsnZX7qgPEkiHCU7XJS0DdsGg2/tkTFlnxnvch7oJfCeLZpzGwYgNMr\n7eLpG9AxndAjM/322h2xXxL0cUyBkKZH/4f9+eQzpBx5Qp7ZEvkMs+VbMlfK\nCz1roS/E9WMJUjHhAMXMy1xJ9GAjK1Rv9tTY3XXndv4m9RUZNj95sQpoKgjC\n+OLvI1LEgcOUkWZwt9nxIoh6oI9MnlosIy8aJvsgUIQp4sioLgDwWb/S1/g6\nGNUhGE2hxwH9vFkXT7QibExRphxvmF5KmiB9YORw4m1+aJpC3ah/BoMJwIyt\nfPyC/0W40zD4y0fr+xi+vv3Dvl6yov5IXuZGnIGD2CVpOAkUtLdQnY5ncR/n\n0BcOzVnci/IhFRZJ/+9IKZIltC15QF3FWWj1NEr2/pVUhdBZmN7e9v8EjqHA\nIcFLA0h4iTBrO1IuAlmE2R/qbuwzpx5nPYKBT4quaQpn6/HNTohIkzfD2W1A\njTPmpxCYKoj4QKGVpVTA1z6N+iDBaEf9lbCn8BeurQbZHtpwnJhGU1ypgs/R\nmc4i5ztICD7VZFAgnbJIDYa2C0wxAwM0ohQ9dkBKTAf7Lwslf3a/vBLpbQK1\nAot8\r\n=Bfl3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfwOD9uI1MSlpE2Qo+PPqUojW9VFCgdyNwqVhcncOVZAiAYL633hRV3ReOal/R6F8zapNdyIvueEnuolobUffppjA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.1d83cf6d.0_1588698731416_0.350602903974504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-checkbox","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-ripple":"0.15.0-canary.3bfc63aa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Onm8H4D58XDw1GseHtfmaDNaq9QjAqO5S3ttUixA8VTyedxmXPmAQze1DchJuBk4NO12uwT1/thAFDcGbMiLJg==","shasum":"de8ddba96647fd5abe4a48c11ddd5786fef0be91","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazfCRA9TVsSAnZWagAA0/AP/j+iE+zd3uMns99A/5VY\naokJaMr0W004KyhfGCPoptI0OVA4M6cbSmOtsdlpiJ9a667z5iPg8SEh/VxM\njGsAnoBeXRU6rMHlwznDKhcPX0jZesUxWFTTj8jXvzVydw87uYKgaLFo81K4\nVjUcUeA5/A2WlxSPVvyzC8S5ACvoWuxzNHDqPC1VFOh7Wgm9H7fhFI3QPaiq\nG/R+AZb6bZ/4mk0lxQ7O9SdmOvCjRg5oqvbTBvo2mYegVM+jtgG990/lU87e\n67SgJF0MXDGAxIF59U1Dg7rltE3MH9pjL0HUI+FOXTLXwktoOsEgPrfIzW8z\nm6Rt3VbdWOVWxfL48hsF/aNQ6dv6ulRn7fQrOIqJTek6coqMIPBbsj4WhTsb\nG+EquRTYF9JicJojfmWb559LDHjbMCPPMi8S1N57Fvr43bF3ncaiZ6wolDx3\nMhO/aNdWH7qcWbVbQ9zlUjO69SJpGBc47eroSNeBZRtMWcTcDjP9InG9VefW\nlODrFSfIJq//Plo2w7CjYI3iiNYCd1brYuktiijPErdZv4dpN2VsuvZGLBbg\noLvN2WPoDMbLl2WTS+U2t9/Rzu/jyCaOzObuajXdWbILLenok82uwwglaGTb\nN//lhwVqDKpNp/lKcH46cLsCNZAjxIvUniYUUMXZTZ0pG7HStPvdIxZQdBT7\neoA3\r\n=QTSy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrtS1G/vHVVZ21injOWMBJW9SCH8+J5LXhtluY8TFX8QIgQCNLWTcTLCif4mPCcanEXALF3wEVD6sHrZch83+Gn7A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0-canary.3bfc63aa.0_1588702430921_0.6281360936392111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-checkbox","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/mwc-ripple":"^0.15.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-ssjko688R/qPAfn4E79hFMyHq91h2rHqrAtvt7rFZT8to0uOurnXNwFLyuzwruhMbPjDRSr5fVcJWqWBV/SN3Q==","shasum":"57cd3cb194102951639ed0a6675f5a19bab988ad","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.15.0.tgz","fileCount":16,"unpackedSize":100230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepdCRA9TVsSAnZWagAA3fgQAJRyW4qc3gCrb+kJnJtc\naEEJBgtqhVW1jHBbkjywg6aWophZjGU4O++OfdiL5sUH5AXLr1gURe9xLA3r\nZhcSMNGk3gF5VJyJJMN9P3WzVL256rjl/ry07MElL0rtSuRT2TUFkbDnjFwo\ncXQ8A0JZfU4Z9TG1RXOTDEsmcz28GH3BijzI9u3eAx4yc/ZJks1F9ZzAQze2\ntB4kNmBYMDP/y1ns/qVhf9kYHcrG2iBg438l3Jjq1Qg1q9A7udcntJNwXQtX\nQJjB4XxHMn6d4gx+r0AG4d0/ov6ZSb3so/hGghdR2h96rlTrCt+a4MGNFNeO\nTAWvJ1D4Zbi/rwWaWDZVB6HtpSfHDnlR/HvqlxoWTzAthMwN2nZcKVrp2DV1\nIesFP7g5Bp+SxibQR5l+xJBbf2bXSegcP0gctvSy8yAQ8GTC5wFI773Porw0\nwVYFzuT3wPxyfLr9peiSDmFP9zcd+uuhlkC2IgZx1cVmZ4hLLwW8jsYqoLNq\nHxSqFZO/iyTANMEDVnP9VCe+Mczwq5HXiYYt7ln2VrVrEKohUgW5a4+WRomS\n7lwYl08kLGudky8Wc0QrXfGmf2z140jpf+/8Df/tBKEQQ24nkR7wZQpXZvpQ\nX2lyRImyNRrjtO86m7i1370jDs+KQp0wxZAhqeI0przw7ZjNzZ5jJB4wL2Ox\n/0dP\r\n=tXbe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBi54fyAdwAo1BekKKfvxjvw85T8FXUx1O4oLaVkXuyeAiA7/sNKjix8Z1GF60ljJrEDnSB6m+dg5wufFC/grIEQ1w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.15.0_1588718173589_0.9072283399919971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-ripple":"0.16.0-canary.1f4e3d1c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YgrF0xqy7il7SLQ03MaXhNQ6UOEEtkYvL+/7XIg9kgfLBEXsfMAnmJiYicz1Cr7cr/6y9DVzlllyMBSESyXuaA==","shasum":"ecd153bb2bcc39acd71b8862a42c8b668426c03a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRwCRA9TVsSAnZWagAAvkoP/iH/8oy4ChK5V3gSky9Q\nN+ddo8Ykrwevr37FPnCrrMVAg6H2ZD6zfo6bbdUrPqr+twj14T0cYYtBVzYt\nv85we10yUScpG34WRBzRXLYM8WwAy3BJ6UR3VyRTqooXpCtywOukMnYC1oK1\n2SaN51KPO+K101IftaqJq1EXJrNX5Tl0fJ72Lis8bNuSuXL09n+V5rW/sdiw\nX7jt+appAsY+TO9XskrCjkUqzuB6pTsxELB242kfCUbaWHTvJOD3y9STnZKF\n+YJ0eVkwebDJEgeph95Srv9Vw5XfhKnDUEsXgfsE6NprMnsoWZMPThWEYRgU\nxqLyj2H+7ABKFITqCgPnSM2H+X931kzewsjO5gakVSEyZHh8GuTV1szas+wC\n5RnNhwZbHPTO1nNNjNOf1cWGneYYL5TycwZy+lUqgMgnT9sSR+q5xkIhlbiT\nW8dl3wxNUh9WOs+ka+xLegfGZJax0AgXXfDhdMIEzKfzPG05VVQ5D8swgdpa\nSKBBhMfu+aa0zXcB0um87/YfkKEVFpOmYDjjm6Z++GyAJvfvnjTz6wP72iKS\npHkeSaB+NWoouSXnokO1hpyteStNYT4LtpfW6qeexTCn6fhxGXNTlVSS4TCS\n8eGJSjb9rOUvcpmm5EXqGRMvk93RYeV2Meq4FsKQ4k77lEk8X2wzPoCYcbQR\n9LVY\r\n=d+P1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACDz59+5JJh4XEX8YU68g1o3TccGRBVSLA8zNo2hf7UAiBUJif6BOfQNTqdhSvkwCUgcenzPyBBaCIWudc9TzrbIA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.1f4e3d1c.0_1588802672328_0.6535002067661566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-ripple":"0.16.0-canary.bc8759d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-o7EBpagnKuu3j7+dcHobhPldeSc7959PTxy3B0fq3T3JtUEHJrH18LLMOriKys215fOwiiiEIpVJmvie+T9k8Q==","shasum":"121d9109e937f7175c6e0c4751024136cbbdde74","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":100282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZoCRA9TVsSAnZWagAAivUP/2bRZnzn79G7SZsONaUf\nDZZYcDVmM2WqHZ+8z+/ppfgovv+xj/ql264KNudyy9BwK86fzmsr//NXdJki\nktRb4noIZp/dp52LKWS1+i2YZOSerHlycnYQp0bXgb5SL4AyTctUi20BzL9y\nVke1SJ1UHMB2KKXU21fMNUucoJGeQWy6KBN0as/T7xPRSLReZVGmL1m0I+4j\nmY+c7KpzUefSnWiIg8vb7LkrCA3+eZeby/Dcnz0A39lMDurBaER8Ns2G6WYW\nurZTORKz44w24r6cugwaUAddmrtP5ck3tUhFHXZ6o9BuJaFAx21t6p05Pi3/\nA3eQ14JH+pgqwBdBeyde5khntN8E5Qil699W2g9KkiqtQSZnOiTz3wrifL08\nHy4LPehTbPv5TV1U4UtLm8cJlCjuSqdQt/rwYk7Np/Katyfojy8R0O2Ek0Wy\nHHoqUOoLpq3GtX3KrlF022qiB8wO0lfZjCUnaW3h/Be3tIQoQLVyFOddFDCt\nsrpWBeuNqs8GUDzS3R2g7lcWo/DtvUgGfwjnhSTSLMcaeQby+GhFN9VpLfWm\n4soQGJduHxjyZvYwpsJ/eI+QHOES5zXWTunX5XQyXlCHI6edvca0bU7iw/SC\nBDBIrSRMCuRR7kevORW6OtrJgw0PfkENBW2+I2KeWb2SvInSCpz6BEPRukIZ\n7/Bs\r\n=6IQS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkRtkMwO0rz0oib+p+jcJ9AGG4BW/JxUYjkOxq3cR5OAiEAnlRoyRx8wnqxbbotGkkREhx1yhc/aJo5apBu4U9ayRE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.bc8759d5.0_1588893287755_0.04507691962741611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-ripple":"0.16.0-canary.d1379acf.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Bah8JITG9g5LbvBlvzaeu8tpaIBC50lvtSCaSROXfSg/0lNPUbBZGdytUDL8YS3YeZ2OTky5hOn6T1AoxA9Aig==","shasum":"e6930907ff8cdc3347114d6e4f4f0e7a2936eb7b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZm8CRA9TVsSAnZWagAALIUQAJPCsTdjffTJpcI3Kk2G\nqoGD7aX4R6P2Co72T1Yi67kEmZLOXtqIuBm0IlxeEgrUBMwzJkM8MN0olsQS\nV5BETe+puzL5bVWhVwL0W2GKL/Tnw4kqKJGfe7bf6wubGsPcJ+XG8W7c64Oc\nGT4izftDXo7VXfy47ofkPGwAT3jpB9+q095RtrVMtqdie/n4edHlA7rizLHi\nok4FRM7Z+0j14mINVVj3qlVcJ5X+FmQ+G+3SoXigwtDg8t23egA8qSvrOQW8\n6YOlaIhCjHpt8hJZUQiMAor+p3A/ZYQmMdBMXuDtqLV67/oRZLpBs/LqWlcc\nPGJepAQ76wMtXd98QZpkzQkO5oBAqkxyxrrfSOQFs6DrASIKFPKxb4RrMLKp\nYUlrha27igfed2LzWH3qr37+0at1aF7WNjubJjnl1psyS3vqYDFENGfgGaEF\ntz6pp5z1xzi+QBCbhHmRRFYaTkaQPuRwZeQmU4m3SNtBP6whUN6112yJ3ghj\nuWn7qz4JiGIWG1ZpPyI+MDDCCz9Ht7HKgvhLYb45SCYxRgHiOxbmFXjI8awy\nNPqzhWsb+EVuZgs6eoKoHdVjvmqNe1qqGUuQObIPI2Jddf6JzNb+2YeDvIkW\nyIwiEANMz2Z4RFLDyH0z4mEPYCmi0p7R0P5D+uMbPO+CX7YJxvKK7JbJsQ0q\nueav\r\n=5jol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKUp/EPFgDo3OWjSTZZo15RhZw4WGNiUbfKUSHubBkAAiEAqh51tOA4FM95wMlNp5dUCLDIUBJDjO4PB0/ascYBT0Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.d1379acf.0_1588959676564_0.33952152416421133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-ripple":"0.16.0-canary.58d51fc0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rPFcZKQKjdBmMF2qz+bLQQEJ63NFJ5wH6mKVgYTW8JBKL050iQmrGnyXUXO4Vj82N0avDGW5YjU2vg4TGxIQRQ==","shasum":"83fac23e2704d70d3c181dbdf979dcad355e62d8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBPCRA9TVsSAnZWagAAxjMP/iPhgFZpQhGWVQ1xjV4T\nY8/6k62eFSH/5WCx/oUEnzq8+ph0JLEh8UIUMqsvSwofN4bDd332lnHLtJId\nbBI613DaKYMT2dP+tvTYRbYug9Ozc4v46/hJAPIYP1bCHVLNpL7kLOPGeUsw\nnKLvNfL04qXqJzLoOmp5loO5IzebnGb03SqgLJQVzhhUcQ1u6xXdGogF1Yfh\na0L+ql+CyTB5tZGnLrPBxntlg1KHt3u4jZ3GJKbvqYN5opo0npavy6HnjpWG\nzm2SV2545cv8t/KcAIUsvlYKrm/xtgulJYBLVP45fbWwejzbWsQEsvoNvCNF\nqDsXXIqjR2Y/ZV31wN3LA3ycmJcSNsKHzO87LhwYrYXnAYo5EQMaVzbD0HCX\n4KPW9I1VT5VtV/LgI89u9lHMl1Sn1DZI2uW2GN7/ri59HSsk2i2lpcPNDmdR\nJe37ZDG3CsNt6zb0QW1LX+S/JVssgJxZKVvfAvqsvX64hFqWnzYd7JoG+IQc\nHmGBe7xOBtMSRQzY5OVc0bC2B/bO6PcMFo405gfwgepE9Rd2Y4wZ53M6Na10\nAqN4nV7gosx3E1IjE+pLFfBqUCS919kbRJXsqyQf6RnfX7sQF6z51cvNAufT\niFi+p3dA40jRCdJ8YlRoawuqh7/ttTpQA4ftU2GTPlXvhFAhO4duMDqeznFE\nPmUK\r\n=kX9N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9PvOcmKRzQrKEjUebHNSYp9kWBnBJJxn/mDDJD/ckPAIgAiQqaGEW8oe378Kh/C2RRwnB2mFZsDNrDfYK0o3vJLw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.58d51fc0.0_1588965454502_0.02104940013435863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-ripple":"0.16.0-canary.588062d7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ynmeEuR6Oz3tImQzD61mFClfagOgQxEiQJjxb/ySSuwwIKG8LGB73/QnVFMk6O/WUJNwSjTA7ySR5Z0qJ3BWcQ==","shasum":"ca89585078394aa68e28c9e749a50ccfba79b8aa","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3jCRA9TVsSAnZWagAAT1sQAJmx+eRUgwQjh+yrhzR9\nb6KeBcYt8972CicO65YX1nO/2raGNkujmUU1xDFHACTCCvFoK8XNcFtqCp/s\nbXkq0qQXrVtrz1VZrDf94zcbpTDCBvT20HVtCqn4uPq/8KKnP7r1TRFw+2y6\n/72L9jvMGMOSRyL5qXfF/XQ9t4ARklSSBwjehRoSH21chniM7N++ol529j8P\nt83taxNnA19AfbpxLoxE5a/jkvoKkrN3/o5DaMToXesG08Gy2I+gtgq4zNBY\nBH2rFNO1eEFDJPhh7yaiiU1aam0GfnNH+DLwkS2WfuxVJigmaIrIb7M85FS6\nT301W9tErPYE2YpufN7HWQskYOHYHA/KvKSQvgqESL8Od4XlRA3exd1a9TzA\nsR4U91PL0mTI99PdsD24vN99kSrux+jHRCksM3DKsGocrNnzzP3tbMchgiha\n11fa9+/oMOTlrU+yOTuZXfwUCjeulFcKLwYkHGAnUCOrptBQFeF/PGBzZA2D\nvTk6YiyI2iRGMzgKuukck1fcWo2rg7QRTpkkVINShZhVMW6l8ns8BiZ2zx29\nPTa0gHp0yT+sc3/HNUlVcdzOwHxGNd7EY+M8S6WW7GJl/TbCy0MmdW9AXrAt\nIzAEFuS0BgTuoqWv1gNVk60A29z8ZZglVG6q0nSV986ZWaRopgcWVNYzOR/G\nz4mu\r\n=ehxe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIh1NheIn7lOIaI2S/6q8BTgTQdcFoOIi/g41nJ6h04wIgbLP2cthJjqRN1Id8TEGVCJNFEs/wrZMrBDD8o0Ubn9A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.588062d7.0_1588973027171_0.22652603764032397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-ripple":"0.16.0-canary.fa21f639.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6eTVjZW7i3aZwQ5WTQ2ZPVumcxup1uYlklOma0JlPruEjmhc+896ggH7pjPnZPRjOk0N5OoulDYRKe35B6KmPw==","shasum":"3639e2d19e84be02787152781fbe33cff63605cd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYueCRA9TVsSAnZWagAA/pkP/jvCm3o4+uv42BX7YhEd\n40PipmeEveJiMeGwwXwJYWU4MNmb0r6FkihLgyvALKjoGJBmk/ZNzuet7a/1\nfemYYWYGVUsFFrLcEHDFM/tzn30WXEqIi+BSw54lWuaJQEi1cOmIoncQOVvf\nJX+Ph9CFiFb1IzuJ3kqtBP70BdAlHl2Wes1HbfqONLaJiq6WwopctjdhfGPH\nOy7dioHcSvLkbXpgxCUi6xAeVlEMOL0DqWRH6846EsasR7iqTTBBEVtzX1rf\nXnDavffQTiTxERcaLbpFW0zqAiaqzXOVWupXCQgm/uch3ep0fDdH85nyoMlj\n/1IA0TjB1YbKy+UOL3kacmkHkTyRpKQZwsohfI9y4+FzGcvb5Th6WR8bEepM\nKirdHj5ZVhdwVlcsP3fPSaXHi3pnGD04LmHReFdB5fDjvZyXEYbDFBrAud+Z\nQ65x1sp3coDA29P9CKW7oxEf10WJvgH5rblnp1p9tO+9jR6/GpZQTR81Kx+i\nc+HnXOtWIMwCXbI+HxJnfkPgnFOIfRn5fMsQHqNq3YajigfjwZmmPj9KfMft\nuWL6hLjNH2aj7IEQL+MmUGuiNSsWnJX8x6Lj89Z4NTrscNfVQFgJddSfnooD\nFvwdhfdQLo0y5xrAJOe5ccnbfGPLrlCd8ukw0KOad/LIdMmelqkIgXZ7bQA5\nIBM6\r\n=XQrb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjQQ47krp12hK33o4e/BO6IQDn6FM3Qm6gbsV9+Y9FPAiBx+LAS6ZU0axw2iqqOuT5DmmuCarFKUorK86A8KifRlg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.fa21f639.0_1589218205710_0.5716200641662981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-ripple":"0.16.0-canary.2772c509.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NuuVnUjMNoxn+6Qk4vSl4yRygKFKogz7UbqWdlWJkQ1DzHFJfWNsTrvFWpetpAbggv3Ikvq/eMmeHlcUME1q7w==","shasum":"82f3cb277087477b2a4ce17a0441c94be380c42f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZs6CRA9TVsSAnZWagAAWE8P/RAXnmwG1zwU4IXxcAEc\not8p8YQ3PI1clb5VLd8q2G2xEbB2KyEpDXiqwCiH5kOLi4aAy72a+nsPCIp8\nH0jd+uJHP9ooA4Vk17+eH5H3KVwTu3LHyrxbNJ1NYUUs8r8ufUajCSmD5+Cu\nxFDhy5MrBC6yZBNYwZLzW3AUY7jwyoaTgxKw/RZei7cwWM3nr4Tb1BuS+SZ+\nY6k9zKf9lVUpAEwlDk7EyV8wTMj0c7Jy/hDBrX06yc32W1YCijbPJYXTsC5x\nEX1Jt31p9C2D9WLMri40Er4ObuoVg6nEcD3/O3hqbmt4cDwfbmNkzdyigLIf\nVjTO1AjJZMEHR1LlwDMpg0vDhsH+HrW4khInfYlKUH329KpqbkBhgMyF4uox\nIdjVyYfgoCaMVCQXYkguxCEkuXDzDsxCUO1G0zC6SI5u/7aSIYdIgmm4fwmS\nrinM+jjzTTWnkf+4eEQDhbVBc8DnGrmZS/81rmb2eAnjaFecq04aJy2YpU2M\nPoBhzoOL56Jvv4OveTHn8CDw0l7SffX6Yy0QXGmDD8dvn5QSpcHGGvjA9f14\nbs3pxuE+uGTRINFUC1okKOYNdaQEIBoGQLOtV5rT5VT/BwjyYp0FCoIY/gyz\nVZDfhIfApeoDhFQ4dNqxNG+KZMYujVZV+I8PMLBk6QOqxV4soeCeXXoNwMT6\n32wm\r\n=ZqVo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuy6LwJZ2fAWolDFAN9Jyc7JBeJO7ayZqf2vljC0B9oAiEAnupqV2GiLosovuN/HsWmVeeWaPid4CEGIabvvPHeMJ4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.2772c509.0_1589222202479_0.11884498863592952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-ripple":"0.16.0-canary.fc4796d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ddop+QGxmoFF6YF/96lzkreYhZVS8McffQo7QivI0BKLQTAu9Oi4BChU77rcMUcUZzbEimeyLRc6kbb+HyI2og==","shasum":"81612f53bb7c57af4f47cc53df8f38796baab6c9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/5CRA9TVsSAnZWagAANGIP/29g8Yb+wZYLKsRZEEAa\n9FKRi9pyckOdqMVcbK7T59zU10uhd+OV0IewZlzU8ZvhGcPyiFmoIj+gcetB\nGSVsUYPAVVWZBMmZ1v2cmhWtukTE65jO+pCjl3P6iQkYct1NIavz0RujU+/T\nOSpwO9DSypPiEq7O1HAb5f4KpL17E3CTe4Gf9pFgrC8XmSDd/0P1dIG8UUOT\n1wGq2Ini4rFeLGUSq8uY5qUcVt7AdI6ODssAWYenVEm8Q5GAdq3Ykzc1epyV\nlv4YfsATtHt2BWNR+5LpPotOGQI1BUosMiiuSAYDsz3tydmALuyfxv0xvw4H\nMNJd7xDtaW7QA+PCd2P5HCIVMmE2dp0dtgxDaMen7aY8BixD8zz63Q+Y7wTU\nSGZG/ewSd92t7tx1tDV+RCYXZhhDx5NGGzcUCv+4zWSdugg7LnejgSCYPcnR\nnrbWRMAZ02GZeOJJlrakErXusrplIxTlL3NqLSw5/pgGyEUycWP7aWQZjPMi\n9hsuuskVrs7UYJ43rOrPI6fpXERQ+ndKhx/lUEt1bJnD1KoOm4voh5cujIdb\nYY401JcDLX/nqHyE2yatkft5QLuXPjKAuTX8eNi21fU+cUPR0Vvp/sbOy6zJ\ntSm3ynwg47XN/qTNtY+ZWrFTCMUOG4+w9Rku1XyifiDO9sAJp47pu6JFioUD\nlZZg\r\n=Tmem\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD328DYlPrLHxTmkPxtdwHZ6+aBBxrN9TqazpEkOSn0iwIgF1ByJVOX3+gBKrpUcTyOPdRpI0zh+KdlaZg7ZhEjS+U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.fc4796d5.0_1589227513315_0.8332075709313453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-ripple":"0.16.0-canary.0d1c5f2c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fDPA9OotWE8itwaeG5avtTwVWA+MMUB/XlJz/DwU8oAyiwbJcKLSucr68apVC+z6ToKbtIKHzNl62bWTs+VExg==","shasum":"73d760e755edf3d76bf337747c0dfdc3bbfe5bdb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucF4CRA9TVsSAnZWagAAkt0P/3/imKNqPhYASgTMt3Yr\ndzh1AvgISqVhiHtmj6kBQcoyGdIZJANA++J/iOjdWbVyFs6YkCsaASltMhtz\nQXx1peUfSvDm7V0Y88VhxPS+Vx3UuBN9MclFM2wSvYZBe08Hc7WaAI1a5Gd/\nb5ql1IIaNHfybLiPoR3KaKemRVbsz1JOQoc5Z2yPMLL2zjnTabfUvwY6lwLl\nwe26XGXB+jVj1fyG9pqi9gyMuoMfaWooPgnh5z/nkWVM+tHO1fkJHVZLv9xa\nKIt33S0tvNwl0b3YdHgKPHo7pWnoDFwbkXqC0iWksrR61ESiV5723d40gIt3\nwl31qpoh2BnrVdRRfhx8evA55C0Xe8tEh3nwxyITEEjoaiibXtS6hRvY/Crp\n4yF7bLxZVlmqgg9gEZaDGfgc2xfuoOc3YcnOYYM15zaPxnzq29VEW8XBEQcQ\nYcsmnuq91C2NRH/e9yqmcyj+4OId0kF+xeRy7cQK7fb8opZX9wmlolqjiiGw\n+lQoB6H5iU3E94RlAbSkuMw9d20YfIQEzrgIptWeSxJzoUMkuyRyyz5ijXTm\nYANbIGiPUK/+BzlpnAfiZcU5rmdZ8q3gyyjOALTl5WVfzqMWT3FW1qECwxSM\n95SDwXPn4nxadkBJUfNQAPJFVI/lZHGkO/db/YBY1jWfDXnF32cDeFbBcjU4\nxDGt\r\n=DoFY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHyDCOcFZvaHl4258O0njw3RsY6FWhjWjpRTmbb0jy/AiEA2aWPYJILkpBzpKYb0u1BzCaZurj2AWnB1qr9xy2XtWQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.0d1c5f2c.0_1589231991687_0.3358189801319935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-ripple":"0.16.0-canary.d083d93a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ea+np8DGzRUcBIQk2WF+ufPs3L4FCUsVJD5q9aLkRl7iejNQJsNLUR4l4GT2nHD4yXLCPBHFXx4D7H3LE6tWZQ==","shasum":"10181aaa86083d60021fe1351324d4c431b541ef","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetNCRA9TVsSAnZWagAAmk8QAIA0vfroAAPFL6fcUkCc\nqKhoebhzOf/d6xMm4v7pGdgWrbBBOJaLigM3xZ4sYjEKr6kQ52Kx/0m+HwoW\nF8Q5NrJ8rMGhi2RM8WOJiChrWEjNx6Svwo3x16MW4QJ0OnEKXJup9byHgpaw\nY8NzPOLUhbOtMbKsaRGnQS2xVZ6JTkBx1gj0wuSP6hMxbslTuq6dwY6J0hUx\nB2YINwudJ3oxDZvGEeQuSZcMzAXZECmZ+HQ1A8ZymzKQtl1kmyXyv0Iv/0yL\nw8eWL8e5+nx7jouk2xVFhaj+CuFVwFmaCj7WixlzzYaOXKQipOkwSegaJDdu\nJtA4FM+Nf2MBe7nuylCCqRnkuBxASFm8diG2g727kuyeHL1aHho1xCtGhFYq\n2O5NioABMLVH6pFL4J84mS6MZV6w6z/4q4hMRnyZ+lSSbxM9Q3pyPh9HIlyh\nYbtS0BvjZuVdkjKtWCRZoGcwHTlsCcg8w9S1SkZaEQbrvuaPdUqzL1awMQyW\ndnOtSbQyFyY9+w0h9ZajN4n8UtyDNhjYDT+1FrRuCnI7k0pf9pZx6NUfdfdL\nUgBGt1skfRg8dvIu0j8JxqB6lHg1as1HSHdWwjRMwo9+gK1hG0N4G8ZCEfQu\nqB5J4qKRMHa2GmZj1+oTU/el3iueoOckkQpQHg/rcpIJ7+9vyCEpUc35xfdN\nte4a\r\n=Lff8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcZrS9SgURhgNqX7n+q3oo4Ctr6yJv23mw6WusRy5TfgIhAMV6bor03VR7l39600u9srsL74WRA+jlBUGiiyd0OW8p"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.d083d93a.0_1589242700089_0.5449488425139879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-ripple":"0.16.0-canary.c95d429c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3NOxlwcS8Fi1Z0r/USL6LSFVpCJP7Wz/SXQXeVL2HluG1pZs1GfJSCLrFPR9TEYR4LlxX0CZ6zbPo4rYPRPI1A==","shasum":"ab61752b8ebe6a890071f33831c559db01948f75","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxb7CRA9TVsSAnZWagAAhmoP/0IWU/B/x49MG1wZjaay\nP+HlI+vxjjKz8rANGVLs5ouwuDLiCweQASQFUXLwPTlHRh2z7L0ZJLs5ZQXd\nyITjSAG6dCvdmq7MzZO1pf79/79/+GJa0GdTwSMjK46x94oYp7P2jdJH6CJO\no0wQti32W+w4ipYvXZoMT5NQQ9pwTOzyfFIjsi4GF7vcaLQ0TY/ONf85/HoL\nQkfS6scJP7OPOZkCmkJMEe/hGG3lj7H18Y3IBXQtVUmTcqCrCTgGdxX2RoSV\nRlSKJ0SMFT6oOPgJ1iQwImq6SxR86UmTQQ1I0YMZAe67yCtoZApEaO+lUp2F\nVYz205VmKUatHGN5dUmAqyoL7sE/UG4ecemRADBhiT3amGK3YVHsJHY4JqPA\nTsz+WuAiEXjVneyXW49BJ0KK0tAAV9bBQk31T+zCAc8zfbkQWVJZceO/ERK0\nMYneE4kBL3BBvjJ5D1HG2Dmz1BPd28w1Jmi1jwOimhqXyH7zRqw+gyuCFg/e\n3+WMT07SX8hN7yaVK7CGYMDg0g2wBNl8pfD9zB4iYbPb7v/phJuOP925ZoFe\npeIlvZ7hAmAe0gLdHv5tf8d1WIUtXr6rw6gqirpJQSPttVuZZqxTpYAskhcw\nzcgLI6d1eV/JmFgYvR9KIQDnCQ4/mAhLJ8kbMp2ZNokrO4u1qFN3ytGl2XpS\n02py\r\n=Dw+s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxh3e2UbGzoi02U4xojZv8S6ggWDVJmB3BjCL4kk1NWQIgJqzGqAByZKFfwsPlLXn/UpNNY46Rp9eE/ALTmdNcmmI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.c95d429c.0_1589319418748_0.054760039750660905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-ripple":"0.16.0-canary.0c1ad726.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HU3uubtJvd7rkSBJdXHrcAMvQtbwc8E894s1t64EVpVMj1U13lV4iJRKu9yboneoYlyhQLv8UcT0AaId7QwfHA==","shasum":"e23be3b8bc8a9e056a0ae147cc5bffe3df8300a4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CHCRA9TVsSAnZWagAAKd8P/ir9nBKne8diAGHQaSMq\nn9nMARWogbUv5GCoV0a2pH6JKoAd6qOCY8td8Hu2ZRKXLioWbBNHXOrqePrW\n5qDNjGRJxLt/GzWue7nYcIz7uPSJWo+2jEHktDNSP6uJ2743MeGBIkOP4RjY\nq7KV6kxvj6QZVF+IxLrurza36CVCj96lBIzGMpymn5CJdYtUVR8N8keri4qQ\na951qlmjIqG8b/msYvOTzxDNoRnZy9WnT+XqeIM21ZeHy0EIyqpDr5ynTDgE\nwIM7JKyt5CosNKuyQSrM37L+Ndn2AbYeBpOaySDS5SkkRaljfU9ciAzOymzp\np052Y77Js1zoWUtwMkR3m5tbH3PVoZtFSQFctd4gMQnrT778oG+9IOP8c9Lg\nD5inpzDzq1siZU6kls+rDMCLHVPKBsxRBSf9WIeOFjdXfpCB/+bD6v0fpJ/T\nw0HKS4GWAsLubpcX3VBjEYCZaEgxTUIuk4ChKRjNqVxzUNalBR1Njw05gT0S\n/fA8V1S0Iwairvu1esFUecLwV57EwRSwKs/e+r+XMNyKZnvgfwS/1j77rUQG\nd3Tn2mj6UrAOgBYiTo7qBq2F26M3kW+4rdG2f9mlqqlq9sk4P3Lcl3pH/9u2\nxLozO58gFqyTu/2hQwjtnwuxbvE/WmefGSZFuvK+xlIvT+yf11UlGlfaBSS7\nuC0v\r\n=P4yz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS3NQc25jKryPPIyMwAIS3+zCtCK6TK3IysaczzJt7XgIhAPisGu8Oao9CMFzowFeoFl5LeekjaPLvzoSv00NVy1lk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.0c1ad726.0_1589330055137_0.20353736599999483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-ripple":"0.16.0-canary.8b6a4700.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ClrDz1DQyKEvY//s2j1eK+l6HQTIGqZ4dFEUunGmyIuj+Ifo6JQ7Ok16RvvJApoqlOCK6qCG0eT5aijyJN6hIA==","shasum":"234f4d91e49e40c58c82bd28f677537382f5444c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCweCRA9TVsSAnZWagAAu38P/3gKqDYMsjDToqonV38T\nj+dQ/JRqYcHYgSsz5ltrysNkPQNs87bgClBXS+GGZ6y0g4nUgHnBeYcgHRGQ\nEQ20xj23oGt6DC2H4wyVoeZffDoiGSlk4pikeLzHwCjXQfeknlxDxz0PcekM\nkx9VSDDx7dOMdL22grPeTgcdI6Qrz1LEc85Mn5HwzO8DEGsOQzJMl+p4v3nz\n4XbXkcBffrvpTqOm1l7mS+gEqWjc2Fa82Ec6x10vnKKFh9BVFuA17iH6EGEv\ntJcYKhwjaLxymBSYY2x93Tbi82EHr/OH0EkTvoOaVu8Rv2q6BZjKulmB7+BS\n/+eQJ+R1k7C40lk6bTxAMlOXSjT4k3rrYJPAeJLe+qZUudRdqVLP/xjq5TjS\nvp1sqrHaUj3NWaVCUeX8KODKCXsDNVLPOb/rdIu6uaJW/WbtwjH1GcWjMHoH\nOiKyxNoomof0fT+8PSBoDxqpDE+0J0mbKv5WYe+AGkY2/TK6Pd9bUHIK6VuW\nWV6NagVegmsBprsYCNNGE9Df+Bvlef6z2xcMd7kH+B8iVKSfio3C1/Ogwbe7\nAsdsadyIPrEsXj+asheiseCMeAUQZFnCQY9vBKlQ1cMrwHbIOxfJL3eFgKxT\ndCjcCDD2xLdSvu0ZlSZ3bgI9xOAs6DVj8CcnoO0YHyr9lOAunYo3SoZqbJFi\n/U/t\r\n=PUfA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvhSwkoyR5qvdyCEX87dXmUCnoWeABxYe0CXzF0q1u3AiAoub94iMeDTMqHnI707MUEougLwdLZoqJmrwK7XH2uIw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.8b6a4700.0_1589390365734_0.9520603182118832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-ripple":"0.16.0-canary.3270effb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hZCj83DcQkpjKvyaTeQixu0BvJLkDXnRY2HBNHpdJaAa6ZxJArbLD2YsEQIn0DR6pExnZ3nXU8mPDqOXLz0jLA==","shasum":"274252b8fb28c1fdf9497878043243cdf7032a84","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWYCRA9TVsSAnZWagAAUiMQAJKRVC8EWKFcV3XXApI/\n0ACkfkWubpt+HkH53bbf15wwXKrbOdYSlYA8b0BiRR8Voipj60InO2IphfUk\nD4C3PDmMU5zsg5tIbufNFnDJFl8H8pISuaRTesAH8AQ2izKou/ZGKZTD02CF\nKt6NK18rRDfF8vuSnikwnzLw5RSLikSu+Bjkf/da1i+DLl/AN74C+yvkeEQu\ncif0TRZ2g9xn65AIUqDoHS9NmcG/is79jsDWHwBrNfb64fU32HOHLIeUHrYq\nPPz7Ryp7CfGwh37vZoW4Xiy8TpfkgQxb4oqQrvBFUUjLV5cxzJZRrht3BBaC\nRvVMUwhszwa1TT1oKIagMpFZ71ijqQp/Gqk/FUd6VYkyv5VA80iWcnbU0dyB\npx2dEBUwF6JDBmWhXwdw+is39JUU9SxexPF1lJLbRm3DXmzTjYrqx50TY0ck\nXSvbQOJ/3ggyUe+0qzbXQW/mmIoirDdIAw+Bv2EHJ6uc0ltN+9zVKFX8P1cN\n51Y2hAQz73mr+YdS/qeGj6HbKcXK+yCQMF4JNqHscMnR2Blg6DeYTmpQrNmr\nsk6QN2XlDZ2qQcraEKQEXXfqT52dhCSo25LQrITOB8YSpPOzsnaKKMfNzVFO\nA0S4bophz0kMPfu3Zpm9mmlJALDgGjSwo2qlwf8QolkRVYr23OVmI0tTW+j9\nwrx7\r\n=jMiF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ4+uODbCnBLzE4phIvypPUvaP/zopHt5nj0y1EpNk5AIhAMwMTzQipwA1o19oLsbDUhMvlrxUgddQXouVjtVzr0IR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.3270effb.0_1589405079640_0.5909521138705738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-ripple":"0.16.0-canary.832e64f7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eRqGiUnRq5HA8UIHeCCbwBo9WVK7nQnLh91J0ZV562ENBmp0ob6R5PkRUdp+n14fd9C4RheTZKOi26bikXuKuw==","shasum":"585d3c279076e079fec01be9069a54809fdad998","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJY8CRA9TVsSAnZWagAAfl4P/198A9WsRTr6uv/ZcoBT\nVeRdgW5TrwRYHpmk92jUbnpfqAZV2gwhJf69tn5RL2q3CVAK87qPUM6xsw7e\n8PkkmwjRFjYfDojiOTEp9BMa4Lsj7pcfFYumtm+Tv+0ONLYglOevC0Vo2op8\nDHuKObTnNhoKcH9cgbyZA6y0bsWanQ7PspLyEHSXNE1zts1lhfEG5ck+hR24\neYw+2d9e7e1bxY8EbXVcR9MG+iAVy8KNzywQRYk8RdZ/FgvQu5d3Cy0E/h7u\nDgNOtoUd8Sc3qqKGJ5PBR3PDyzeWQuVbL9jjVIAl0T7BrT0EZfFiOMzAznVr\nTYAIigGgl2boOCRGSgBBhC57gx110SHbJiiLMdrrZi/4AYfzVqf5OXXv+aKo\nAZb76YfYnPi9Kvr6sWZ6/NcJpLG1Zq7afSvitLs+P7KlnBCDNZ0zrx9/Jf2K\nQ9nRal3OkW0LBvCwsTRDKXYB2GrcBZ9taWN/3sLKynKq9TJz7zWWCCx0y7D4\nnrxqtkTrsSmaAxBrDgtDNdj6VNeYSh//k9IN54W/4UWcGKF4ERUZN6Lg6r12\nnxNVp8CYq141yD4xbYl8UyKNzOTfsMSoHDRQIAF3BwI0M45piPKUu1b+i0TG\n07APN1gth7VDbmhG4XCKFbz/X/zjNiZ/HPcFfprQZcQyuR/LZ7672el5P/TU\nUcsT\r\n=T/57\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8la75cauO3Id+2O7XmH1/OCGcuY7MFz8+Ocf5fJTeEAiBAahgJ7IpX/54a9M91beENaxgvzhv1HdpK3L/h133mKg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.832e64f7.0_1589417531876_0.6908662295267036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-ripple":"0.16.0-canary.472fc4fc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EXsZDJ1xMIfStXLVPyACWS5XgA4rS95usTa/Y7S587VP7KAiPmv2HjbHqmSRCrtd2L+BR+O1lT4AEvZz1hb2kg==","shasum":"47a3a71f7adfee53315ce0f10a3c89ca02a21d03","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLy3CRA9TVsSAnZWagAA1cAP/3jHjRqg5g/uRMoIbaVC\nYGlPc3NY2i9ws6e3ErTSH8VZjoQKCMA9eOLAZzvngZSSGb1/+vkVw9MguMx4\ncWmJfy7x6YUuWERhqjpRk4QDPZ1eE2xionxzeHvShV8J3S50wwEXkOn2KV6P\nOMZZSt7QgU9YMUiibgJRpBggBWGm7rqKZMPVFUw2yO9tzlDQXuHPVkRCMErd\nmMnbF4JJQi9bQZwU4Zksaqi+CawZovFRAU/uN9JaqfdyjfemWIv0K8rL7WAK\npPdlOf7NJuScDJ+GQc1lUSpDGRkYDzCDm4LHRyGZHUnDleSHK+GvztQ2goQz\njIiBqKiTbX+Vl4tLKunLmpIwPceIfAdvEXmAgpRniMsVf1a4GSxuq0mZu3RW\nLl5Lbesa60q3t11biwwkEZlzfmQKIBK4H98tCbwX2eFP8VH6LU3qlV8RZgA8\n1Wo7wUJ8zBe09cdJDGVGq6Cn3GryU7QUZKWd0X0DSPkbHe8SUx2N9Mp6Qh4U\nw9aNFKuQ37NFKJvaL4PamsYdA6QkM3Q6YftgdEik/biiWcVIRbERMZXyK49c\nM9ttL9dgBirYwx0zwIGG1L8QkhC9OeNr+NCWeaTcuc2/rhQ+OTOI/55mJGag\nvLGp/Zmc8ajCaGUEoIsPHoxro7KzXtl94p4LN+g9LYp+6R4Mx7R3PvwrZFAN\nhiHD\r\n=2227\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB60mxTV+zQtNGGFl/schxwbCiFax6kR5pR2AJhOm0T7AiBDmSjkmvvAa0fQNtJcAzvZetQn31yHCeUruFylg80KwA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.472fc4fc.0_1589427383101_0.9212861874991713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-ripple":"0.16.0-canary.4dcd7dd5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vXY81z9yk5kRodsHVExOI1ukf/M8s9MpkJ245j6l8+TWMyl6gSE0vBcfkdEaHxsfGyu3GoMMH9ULfAjroBREtw==","shasum":"19a02c48a43d8acb7750a9307216e18ab2246ae9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDVCRA9TVsSAnZWagAAXmkP/1Aiz1HYXDmD7mq4yKly\nyRv3hcpwnVFCRMbDthD1SySziVzwYjbUZwmGl4vqHbpTZCIvgzF6h1ecOpv6\n+Pw9JbUFST6+TxcLwpq4mrE8fwpO5gsjPZXFL6Vmi4GLFAUYbsNG13H17eWy\nvcJAQP7Rn7dmEAPg3OFBIzNWKen3JzcWjI/Xa5jHDIaKFP7OoddQOIIN/z9f\nU+nkkOp7TD10UQHsXvvzDJg1uRjd7wZiA5IGstrut2hA79fG61UvLkso8YXF\nitRfBTxvGNrl35GymAI7zuhp9BCOUR6n5rcLxPgiYt1V7l18+FzFPPNSHLdk\nhuJH/zDOrnDFZY6/XPmJnzwGKp/swOACsGpS0NhNyHFoNQozjtEnfPRtLyJF\n7ZSHpRkrr6tqlVBRondfPISMuYMbv0gcURz1bEjQfp08S0HczJKXaa9BmKET\nCD55Bp2bNKE3OUjFc2DFf2MVt5xIVoW5d/sDQ42yRnxyf+DSrgBfDuVpUJd0\nyx7v5ftSFlPF7bMMvPdBrlVqMPusCwGspyIEQ2mmV0ooLqqUffj4Rfi+bpbV\nETr8bo0qMTgnnCZV2w5i/YcSFda5Fzr8KwK66qk9NxA4/uPn8QkS1Mcksfea\nQJ/OzFrGdHsZN81Bd2WX3EPekdEQCh0oguMrtDh/93G5LyZirmReQRRYQ9qS\np6Nd\r\n=vMGm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE40/wuYGaeaNfL2boai9Imebv5DjywtihQgw9iCfiWAiBGXAh6b4iuEjqKD4qu7LKmMThxXIQQXfUzpJTPtqfJog=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.4dcd7dd5.0_1589473493270_0.5444105328606472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-ripple":"0.16.0-canary.bcd3400d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y5bys/duIg7B1MTER6XaYe0ZaUy1hhKN+krc+0olfCFT9z14oDp/5qUFdlP0B2gvM5KU3x2Kp2F5ULSU13FsyQ==","shasum":"4b4cc7c1a6e67c1b92bb4b6c0748ef80ee5068bb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyRCRA9TVsSAnZWagAALvUP/0IS0bbGEW/qKhzH3iQW\nwIFC/h8ILj/1OCvd2E10QJp7/HJCGWDCfCnbHOF1CUSueYG2cGUhHFupaYM6\nO5elZZRDhfyX0RN6Xyxhes/Jp+pkI77YpZyXiB0rRFYvO3R5VX6kcjeQUv1D\nYnT+42yJP9YSXwgFRJGcFcmS5ifvYMxb1bpwGjCiBTOv7gRFF7xqseTIysPZ\nAX3K1ovvQTKkCvAC4QwUKSNcOOXwfZlbD2VV3y1bFyJQy7MvqMrPhTvcAiIC\ns30w+3HUv/mWs7iJN6/Kz0wEYWYXm1vaqw0IuXwK5ZnI1fc369ZFyyzzhryp\n4mG6sFuXknokShRrqvT82AZVjVjB6+R7lunfV4N+KS7RGe4bK6NCsCkCJY9J\npE0pLf9uwz7PS6vivDsnltbcg9mJZgengA9nZKhuaV6zzgBxjVr///HVUh6D\nNR6QhG1nD7mBxG+Lq9TulA8I1e+y4vFthkK5vY8edfRkIx8puG/H50Y2A5wB\nTsM2hjNf1bnOr0g6x1P4nIwAbYGQjgXXDvhmJ0FjZUS6cZRyTP+z5dr0ez1w\nBWJw4hqMnq5K2sbSJ9RPBVymmOxQ8fHOmfwmFik7+Ff0p2l9AEJg6ncHhmdk\nynfslKvQ9qjt0x+jkfenM4+Dkbo3Gwg4NT3GSXku9snjupsMR1UJ8wSu/6oS\n3gsO\r\n=wmZ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmOOPjA0EkezgQmmrfzAdkC5wnLGgXVTm5TuecDGBk5AiAlv9HxlsF5eODx0wcB180ogUkrSyaYCW/FatHgtQlDyA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.bcd3400d.0_1589582992910_0.282060915412393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-ripple":"0.16.0-canary.91f63179.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y3V37e8IlWPvxnbhlMS8l2u2wV+QzKASy+3tQtj6ruCyWpL3L72hgQbHrJLBx5PTAVwrpd1YHKewb/70wIf99g==","shasum":"eec7bbe9f7608f5b07c766bd7b4a72e5151dc478","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUZCRA9TVsSAnZWagAAbKYQAIlXNp6a1IT56SASjbMy\njkD/AHNop0fenfkduc1CWjG2gfQsDelIcze50mhDhyUSz6da58IIBnuCJDma\n+xF0BA8vPj7Ue1+H3+1LbUdohBapoBXcFEp5TVcdv5h9ZIsp3QxbLOUDyTWG\nFwlt95ZSjxQGl5ej0vt6g9Fg5AHFVbsKS/PJ/+yyF8A8/UGDT6YrQoISQO9x\nOJlU2GcmRpL0qot8twrlcyh7RAiTXoiV6i2aB2hDbzdhwb7BRf5ZRSDMDRDq\nMKIy2lcSsyPcw6p2fEH3wSige67Xkjr940uSXgYImyqLq4CPsNs0sE0p6xPT\na6uQYwt/DtmdiVGgJDGqKYAysr9+Z0GTvAckznXaTJVPOVN4alL8qnIkIV9n\n+ckJ9jtpjy6+5c9RaCgCJ1KLqX+wMnAerXM3lxxWhLJp5g6/nOGxC5IO9cI0\n0ZVvqbgv05JdWFTvl9Y4+XMoNlnBJvS8kMAkCf7f1KCIPqDDenInAr2ez02H\nNOaqT7OGr6GhO2f2zoRz7Irz9kgQGJwWM4YCLCTBjz70ydnWX6cxRaUldRP9\nOesDZD8thxK8eaTXCi9IsPKbTWIIkpwHExLV9joDs1X1nxGX8S3LPiF6bubM\nqfHKGQRH9CQcSUZAwMXZZFlLdEdsW+t8GX+bnGPCwKtAZ6obagcXIuSyJH/+\nLRdN\r\n=WLJu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGfgTy9BnyTxtorGpjU9UTt++q561bELotqgWX8VRGuNAiEAt6D66jRFG8KyMDolfQL06JYWqfEzJMcUQ7YZqGw+GzY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.91f63179.0_1589589273305_0.9883943387237566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-ripple":"0.16.0-canary.b8aafb56.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-78VGBEetCRF1UQ9lWBzGNIQ7zGJFfbLHUrweXQYHZgf4FkDOSZSMIUhjxYmdRcbhGG6+quy/2VkUNBSkVpuqag==","shasum":"57b8ac7323358f06360ae7a9b81121c30c9e5a86","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSMCRA9TVsSAnZWagAAM6sP/2mEZ+IiLd706Hm2uXlT\nmcaLYgCRbU+s7/sJMNUSQVUguPF8mGDPqm3lsSsvLc3pk6shDOKkNQNnL3Ju\n/4D7lWhT18cD+snMIAMAYkYWSshNUluXCnNSBTKA8bFpYlKRsL2/zsTOcIjc\nYxeorPpcvtlDQxByTlCMk6zPjHXd9GYnoMApw1Pe1HS3YbIQphl8D0iAy6cz\n1sOuy/4tlKP5aQGckv7IOuKe6YP9oRfRUCQeBHfVQxSQkt+kq6nDR4Qwfs+r\nOGnvq5l6mIZa1jmbuBA7hMNRDg2+UgjqOl8A3NW7YAjL820bPnJsl04VlLVl\nQNk04ZfZP5kVfdndLFcOaC9SQCYgP8JfG1e9yKm3BytrwrK4DlV8x8/M/7BE\n0pcQB0N2SNQbUc7UU6D+lUbJ41rGs2RApFV8l2uCoFyKiIuvceeiFT/RE6pc\nSXZmvQEvZNkj00fKC75Y3CtnoNK+qIy6Wp0t0JX2MwvqRSFvoByQ7Rc0CtIb\n2UmpAkU1ky4RTf6xaKDfXNlmJ+wp+3VyKLVBUM46Lc+pMDL+xJBsPBXOSrI0\nQWktrpQ6C7HgXESqpfKWHZg8TAqVBYzZhe+qaSVpJxUzGHa40KNoJfffHc5a\n68n9swTTO7ix1ebZ1PCV368DvfJa8bDeTPhsicN/Fr3mUu55T5IjcBHN/wvU\nG2IQ\r\n=PvHv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAr9MGHIkYfYK7HLDsc2RaBWuHP4ZZ/cPoBbDoOc3GZTAiEA1PpST9S1qeVJiwitck7LolKiw7f1EqMFBuGMaxVmYs0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.b8aafb56.0_1589826699705_0.06626743577680583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-ripple":"0.16.0-canary.a564b194.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ch4kxjD6CrP2rWjPtOeYPHz1iwWe6BfdNyztChYdFeB1VdvlXQiJSkQ3GUgk/rS19JGLLx9tpCPkHzSd6J8HnQ==","shasum":"e99b04579e1b0d0d5678a6026a76d537aae2032a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRHCRA9TVsSAnZWagAA7hoP/iNu5qu25taLcy53/dny\nj9aM5XH908K1QCJpZ6hswU5LpWB8pz38FxcMWGXw4nutAkUuNIDrWr2jWCcw\nQOGvboAV0sYAfvnRPoAZ/OkMUZAd9CU16JtqaIaJ74oc4OS0PHCdVAK4jVDv\ng/sDRvuhUf+LgfuOpWGbVAvA27bfXQprBVqvYB54sq9ap17cXIi8WCLC1L5s\n+2ifuLUq3WoeQCze+/kxWGU11B5kKH6yibEdAcyaAxaYcUb/YwdJ/7fWurwF\nJTKut9CCyYt/2JsPxukuxoJHaK7fQEcITHAgG2do0My86Brj2diPl4gHhqOf\nSvMEwwutvQTfJ1CJNgZ/bhsqX+AuhWFyvZivAFQn6dKDFdH9uoSlxtwC1wya\nyVjUQ0dPmiU5HZaberyaoVbRKlbCho0g+AlLNVGlP2I2dtjay971pptwtePs\n3v7CRZ/lGYhGSBt0bThpVK6hzqZ14xM58Sb8JJPA0UKwsMAuTQSJZXUzwPPl\nZQBcWnWKIeyZBlmz3udHWGwTUxqYoVaFnbjCrSaCKs+pWDt5VnHPK+ttmWLJ\nBPsKJZL2fQCELmNvAZT2ce5FuXwKucIYaZMehxglZBTr+pV1egJoUjijeuGd\nSsITBCFk0clbnRpwvZQcnaeDLiVQrJ1BAZvhzQXpA6BhIuGPrAyNoPV3PESe\nLOsR\r\n=Vg1a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNBcVe/Kh+R7ZYMtCYwn/eF8Pis/SFzJ1Ukfp0f44FNgIgQry9TCFOpjzgFI+QWhx8zEYiCHvouWDmwI+9QwzMWVY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.a564b194.0_1589843015112_0.09592193899376444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-ripple":"0.16.0-canary.ef56465b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wBAridB/dfe63L6vcJ9coqJJWsn/SCXdr3b5xUPpGRAnjGI6WMuZKctaXIZ3mRh2fVP1MQBJ9yjCaZEKAcwS1g==","shasum":"75d071149bda7440f90e5622bd2a428e3ff0268a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1boCRA9TVsSAnZWagAAXBIQAIeBuQ7OGEyxyRp8O0SK\nRm2mU/duDaYwxW87Civ4LavRpVH2V98YtXp8N3CnADLRDybrxYXiLlLuYwBX\n0sJS5aMju+DmHIhPwcIgy+eLN5TOEnGaEE3+YHBwDivOotORKb7e8yxrhCth\nRrFb3vNHMLCy+JFpX66FUZfc4/BNjqqb7Gdi2MxPiFRJhvHpRXhLpu9cpF1Z\nMSw7Wb1OYpD2U/x1yNRc+sKPjmadl+jybDIypA2Pgta02ZRcRH6KCeG0ze1i\nnNSZByIqZq6IPPhqihTdgc72asf53YqwHyNvbsgVd3pY5qKqcMaDS6gcLXNp\nw1hLtr4qpRfnU1ipRnYzagw7mgH8e/kyyeJTbKL+y3cbchF5bUCpaf3+QuGW\nVpatUKM7OMGLcJ/Y0NZd3odMalyMUrzOcx0VFOMrpMyNw0ddzSFji0Vl8jGc\nSRnoGQBocwzKR/THYwe8GGMQdZYclJ9BBANur9cu2BRe5jK7+oqyVX8DSyJr\nLf/q3Spn3uOu/zu6IA7jhecW5zvEvZUQxoAk0lYCiIf/FM4Gei7YmmWi3J+z\nVjHxFrZwFVP+9hUmM1+pnklI+bl+oxSI1Yykkh+8IJcvuwu0nptIN/o9RjUm\nApoLTwCxPIjGFyfGVjT9VFkeZrYeUB1LUBOgD2z3P4W8DeRG+CR3dsiPWR1O\nJXW5\r\n=054Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuKle2oKbpHkNMCC3/YYuKOtKiokYtZtCDfNY7QAwUUgIgDAECDqYtY+ihjbrYcRWl58pCP6t3KSZ6vpVL7YyRPqo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.ef56465b.0_1589860072125_0.7227607045128233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-ripple":"0.16.0-canary.c22dcd71.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iwym7IUd1froBtMYPM6k4dny4UyR3PVJbKL3x3QginWaBvdTBuwEkO1JR84DOcV5QoiFrAnwn+h4zJPmBEcl9g==","shasum":"c0756ef8dd426f0fc3ee877c028e93b9474b5736","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZECRA9TVsSAnZWagAAI4QP/3j9tds+JsZ1yO6KJyPB\nH4HaRUM99ungk38MksRsLIRLuD9nSltv/ZJnEWiGcTbAywh7aGlzE8qn1aTB\nNCANqDCgATer+RJE6DT511ehMOVb3xfLN9s27JbXbYGzC8JeNMenazvdpJNP\n7I60JyBPs8332QIegOi//wO05ZXP46Bqvb/xFeOksdJuv4UDeP3uCk2vd6G1\nlZogXv+aS+SustIbC+gllzr+a5eNCZ8mBe35OB7vkL+KVdJspg0076v5t5Dn\ntQoBQ9dXox0z35tKgHqQA/+Cd5CAKk3pc0+aWzF5HZYLfO25cDT6yg+CvHvh\n8SfsEYceF6ypAjJLhVL+5OFcO7XD0qGGlJz2AJzGrOuSnHYi/xFhgtfN4XaX\nG3sOQyQrfYx+KpUPsFIp8CgLFWM8I5Fn9FbHnUZFW9rg+mxJm5PS7d/ZC6Tb\nBhYhuZ2m0diX0/hGr0wvqeXlX5Fao905XjFcZzY706olvFqS4vqhf7Ye2b+C\nmJKeNVKmo5JK0Xzots0E81CFPdwLvRDQB0VXTF7sZg6HTGLER1gqAfeD/yaw\nAoYi6fBCOOnfhXNazPcB3qpSxS85kcyLWfdjIuNv4OYBSzbYp21hF1kmiQWq\nDI4wPdTf605NqKLPJbbWalYhB1JniSNXHJ633uyJIKA1ac5BJEbWUqDQb+bi\n18mR\r\n=3G42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5QLSHVw4VedOz0HdebInoTatdDrceLvtaOfs4o1/nwAIgPOCKKx3C0VjX5idw8FB3jMSc67rrrf7Kz5fFECH1kzE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.c22dcd71.0_1589909060411_0.4424250107677956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-ripple":"0.16.0-canary.6eb62388.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-k+5Q8OL491jJcRkBk9krQ6xewj42UVtmNilu5Fz2sKNPbqk5Qg0Kgw+NsxVCjC5RLcaQmy0wa7golxyDYm3FdQ==","shasum":"29a76af5016e6ed81fbfba5f13d4a84265348cc9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPCCRA9TVsSAnZWagAAsgMQAIQlKBlwi5g9mZCblfdd\nW3GA7OwXqP6JLsunp9QJU9iBIOFWZY4fnXtS4UzwYEywOgk0nkyjw5FPD+Gt\nMCkexq3XV8PGDXV/LC1eO5BrUh+lcMUmuKvSgJ3OBBPObAQ2dt7QXUIQOayv\nLGNj06j3H03O4f/WTe3AMvcZZ40QwaCzT7aa1BAOHBdJ4PNEooSpN43Adr0j\n5HNCaO/rMy0okIib/8bK6HPUzRJNMUsHD7N60pVRVcZKNEcANwYqkUaAbrPw\nJ++D95tasbZVTWQxwXgsC+KBGT7srVJV1mSmdvUbci7wB3HsdH29mkpA3/2A\n3A+VpjKVGG0UG7yc2Iu9oocu0CcErT3+JhMc69U1i1pVMMNH49KNnqclKGCN\nYuXql5FTkIEt01ng4VDHRX+esF5tL3F3/zgvxX65tVKQ6b7XtjALSueEiRdc\nHuZkltWh8CqqPoHUef7KRM5ApQ1N4ofAvMZfqFd53n2dSD+iw+JRHN6zTdKI\n1gEHNXsLmUqf9JeehIky9GF03DnRt19rXMcVbSIy0lvMTT8RB9EUI0sBaJw/\ndGRD7SWNQh9TgFjepcmOckXC7f5KG8coa/Zr4Cz2Z+f8XN57OcOU3oWREQF4\n6BySLvP1xgxx9XU/jFz/7EfOkAv2Bv5TY5xYb6HGJU6CKnVOrhxyQQ/taX3L\ncigr\r\n=DkvK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7kmOPTfk+jenNU9VgPf5X7VixvYTTlOevILxdz2cGiAiBe6YNxbHJpXs/CelbK1pVEphZgplPIvvYZ0GPercTDLw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.6eb62388.0_1589920706131_0.12853960130138242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-ripple":"0.16.0-canary.9bc3230c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RYOkcc6yrvD2/BhFhFb0rnTpsHSUYxtB8SAQ3FlUpsijo4+u5Hvsz2tnsR0fsvqzYLRMFOXUwf7AkP92vUYHIg==","shasum":"c94495b464bae3f7936c1737ae5c69e7b2a9b5d8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHeCRA9TVsSAnZWagAAP7cP/AuJvb19kpW9/Sq3FgR3\nzARbC069iiJZW58L0z05G3O1LzHsqGxtG2W9mDO/b8werwd1ZReiRgTutzwZ\nb6HEQLnO929DS29sl5cBooaU9x02imloDzOo1hmfNkYlPW+vUDeAjkY7X7A8\nX1xRg41z5xVxEqbVHt5QQPf9HmuLcsJgJbqjohkriobp94W/FYxHZWQ8y2n5\nbm7yud7PpSE51pM+nGO7NX440jmoVAvodRgiGexaTfnia+k8cP+al0UuiOhX\nAOLAFO+Hk4Y/HGL/5B2rmb8CDxONonMpD1tq3L+Mt0vWxk1jgZyO9Vpd5hC9\n0C5almf3t8XaLOWE4irdv8HdR5diu0LlpGg+YabT6y5kl9K2zXi5A8XBtnTJ\nqpu8hiHZs6Iv8TircNF+vE+7oMHIpqqwleNj9FuCAIq5tViscJ6Nz5ZBL1ZK\n+GsxG0G2rqTqXVjVsGehEXVeIxN+U2zLu7NSLINR1RSI3/jrHhyKziM7lEXN\n+80TCGgtPxw1afGz02r6olxCY7PhMuOhbVQmThY56aFvtMFb32NcYkWXMOwl\n3TCzP2xpn40UID4gW1rrc885L9W2GGxbt92oabTnKLQhLJI+vB5Ua9YAFhNk\n8JzhOTP+QksjXATPNms3md71WjJm+gacfbyM1IFZkkuO/IQAnp+TeSAdarFC\nPSK/\r\n=QbyL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHRrtclWmlOtJa+Kd1x8mhBlKOeMaellzlmu2b61BUJDAiEA3dzqw98GDfwSjvrCyBAnHyYv4hmhsDsAV2gDoH7RU/4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.9bc3230c.0_1589924317961_0.8856025250612984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-ripple":"0.16.0-canary.421a6856.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yb7+CnfArNer+up/C6gFDKS370xNNnAXBpS1GuDQ8QUmggv3bzjcVAN189lHjSpmAWmbNLgX6z2W6ySfTQKtYw==","shasum":"dc05238a6458635291b8aef5050cddc21450e8d9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8CCRA9TVsSAnZWagAA2wEP/36fVA1so4d6fZcVu7aB\n697ruyP12LQDuM8VIB0Kza1MzctC5MmZDRGuC+4SXs+mZ0P2FkzS34SLQqA6\niZPszkBcPzEQoN79kDeel/99GJV9ySobRpIzTTC8m0YtaFAuLoPowYo3ULt4\nJG1vryrswLpX7CgMG1H0AG5rbsrm7vpQQtWGIvqzBVmIhAGsfB4cjlknec8L\nFFPXmJ8Fy5x8FxxZwfM3fj539G4dj4L7wZf3IIsmniA3E+99GQKPUXltvxPr\nZVMK6sFuuMnswhEHaVpce8p5lYtfF1UEpwaYBY7Rrjk4s9qX7m/+nVUCl8rk\nkwnMiRe4jJNqA1HSaG+JDDzPe/c90ngZj4G4rsxY6bXL+7w+142dUQ4JLXYy\nCdyWZ465Q5mC1QZQPK6OF5pt9wwNPK6C/nB+6TJqJ5sDuvnx9cojqgzOuW49\nhErDwxKRkRXWD+o5mUWMEDwA9mceX43YUOQVS90e9mvrhH5Ou24yhk1e9CQV\n/qCT6oXQXFiRKOVqqxrUMdF+OOkiTaXipEkQRY7aiyhEJSymfQkDnRqWTFvL\nzC5FC3dBzLhKW06l/VdvxjnQgF4svQBIsq5mNZKe/ABEf0CVnh/opthCEy8w\nhAmm3iMNCPkSV1vD5z1SJpeMebYiEA7a9cOvRcqD8N3kG5ScIZQzJBFAD39M\nd6+Z\r\n=3rnt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsmEE5JOmqoSLaoZXC0wI/Mmy7G/IiOio73tFE0UJ0GAiEA3nv53/H5sjPgKQEGDxQdmwj56eNhjzxez0aHpNNSk5I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.421a6856.0_1589952257750_0.22889014538199004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-ripple":"0.16.0-canary.761aa6f2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aF9cOqWgph2lToo1KQlpGu5f0eboPhDOBkEsKzQoGs4lbeVuNwWJDXXIOwhMSPqwAnFSpID3OhsdrYko2N+Z2g==","shasum":"ed4fc4de9017927a360e39f4ee001c41aef800d2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGNCRA9TVsSAnZWagAAqo8P/iOA8sQZ9nrY2RuOp+fi\nE87rDlQBAw0o46qnLCb02CoTZ458b9ADTvffwspWaceOc00lrqcDdCVRftvM\nujc1a9QJvmeyQkLaXkqNe5I2Ze8yKchOygQtpcpFf5OmxQUzA34OiXUYrE4C\nwwlADx1IzAx7EuNRk5Uel4lhDufmPREXRD/Kiw2PHFNsOAPsH2/7IZzhOZWQ\nKJOhMHqzPHC798BC8WXppdyVkG5tWgliOk/xVz2EGmqBJwp8oUilikxPqPjc\nQtY2B8kKHJH0vWtDh1phFRWj5B6NXVYvTQsk8cgLbyZ//5EQ7Y6MJ3urY3lK\nGaFGL4xPJgdiD+KaYCAg+nUgel6M4YwPcTQlMnAVXJuYsw1pg7aGbM9ZMNQO\nU/endspNCVQe48T4ijH45X7Qs0XpGY+ppJJvwWQDaxcjzTJPOI7GoULoNaTv\nx8rYEiKBIU7fM0VKWJU5PTdOYgTUN5iDoo4fkEgyjVtJIHrBVX4Z7bC649mV\nP+yd4WVglD2TNp+G8EFfUlkNeatnBiqiiTzeKj6cej+Z4GwLvqp4m+cG7eIQ\nh6xBTmCTBGAxHi6tOYWQLiQKD2atWbpLPf9boTSIhnZQ9Q+1gSi8wbOGWapR\nVrPe0t+MqdOA0coVuw0nlUisJKUe9RJchf8/DA5kOvudhhO3QNajHTw2KMQ7\nJDa5\r\n=Veeq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFL96Vk6Wul8Sa2bp2U4a6wkeVakXj7V5GjIgIbp74g7AiAVluxe9860jISYiAnv5pI2x+bYayYAZoEyDDlxNuHQWw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.761aa6f2.0_1590010253012_0.8101683253194707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-ripple":"0.16.0-canary.f8654c40.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-90MVFDfXoHFPb4u3RA+nfGqd5G6WRnyYF9X+T6u3I/RmSwMCLpuXak2Ta5v4j+WDKVoWP3ZqL0IxAYAceSUCuw==","shasum":"5f758808d1378a405a621c4a812cf30b7edd5828","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPJCRA9TVsSAnZWagAA28cP/AlupZKiRLm9jf37J7vX\n+netZreT+jSTbXsU+yT7wBpMiiEotV2emGcu5kEb6cwwxBLZlwq6Q2gL+dfd\n/p55gymuZddxKydFrfMBhhDWgErWCHDEis67UyVHfHRonn8ug8VJDSQhHRl/\nie7Vh4FYcekY64T2xkelrBt1VkUoWBw57V5ZopzKtDt08JohWbUnF0hZBHR0\nLgL1lh0E+VvYSQcyc36CqJADMexv6GAO+i/xVm2ZPxOprU990TZGnq6lzmQ7\nfKAEHvi+LgzFEeepKruKyq421fZVZ0qPMVjvpEAkQaXyhaV1tokZeE9c1Ust\nw6S/FDvC7Bos3otfgXvVj4aDGaNFimEASkVVHxLcbxJGuCg19aRLVkOfaZ6B\naThcVuZrkWeVql0KvoRQO+PTPlULoMTA4+4hTzB3MSP3oEJHsxbeuBaC69QA\nMzkH55d6bffnRtJubW1qeccosBFdBys+LkMT71VBkbULgO5go6jGcReyZ57I\nRtwNwzd1H98dPeKiIM+fNEWBiUFG/zf35AIS4/hFc5fBsI1BfqfhoJRK5IYJ\nX3H+nA+1fJYBX1J5KtqicsRd7hr2C7C7WhuGixqeNcOZNJ7x4jxUO66vEaT4\nvjUGNMWIZ2q4uRENQ7GITDDZuBYWTk8fkMT/2+WoNA3pMmrNoZYAvwM/aiCn\nrU5B\r\n=lSZ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0XSkPq/4jEQydGH8HHu0ZEoUKEfXkcCnQmDIIYjlLTAiEAtOKHa0Nj+11j+Vnivb2lAloVEi8j5nYYcG+RnO/H09k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.f8654c40.0_1590010824836_0.48027743073648566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-ripple":"0.16.0-canary.05f3853e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ouCc8Wzq93TWW2HtgwyNiOkd6i7zVxtQEz8wUC/DjkllM1u5RNiXuv1eDU3gXlH7N1vL+5dxM+4I2xzbcDDnLA==","shasum":"0792ce0f748378e0725fa8ac416bb5a9c1fde270","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtgCRA9TVsSAnZWagAAqygQAJmhojVE59ERv84V83Gz\nrrlfuFPQyl6oQMmMAeBEUlnu6LW6UYRkA9FLf9MpgQU5m56JO91WgaddTZHS\na/SrXJ1J+2oUf0NTT7oxgQ4fj+EYRUJypyzcqPZ91dfQdevLPyf9SVOvQlaF\nX/1y9ZBS4s0f4h8gxYR6CWMKlsjr+FY/losmJyAF9G2eO5zyIZU6Yw9fNaFz\nJrlaQPCZXeZUMs2yRPE2L9imPAD9+oUxJPVmryvNLXXT5/hHzLptdjxEK5K1\nCf14EDFPlzX7ICbWRniKOPIHfxeYhmbcuKDcUJuDorSnCrKBF0Br6V8BFsQH\n2WIe5rZEzi0bFTUbfM7CmtWjNf6S+otoXg0FtOGsOciCJnK0nw+c4lpOjZJH\n89r2FYvf22+vyoi5ha9O2Nw6/Cv0OUo8LWfU+VSSfm08rlC8ZvMTbNloh/p+\nif6Xb4z3wSTqgTP2z9Ym71Zo6PAPtkJNayHnA2id6SZqLY0rovx6WpE/or16\nHXPyltcZnAxNAlwBE0xhe+Ityvm5Gg5vTAyWmDm52AEg3r6ng5KlqYD6krBL\nKmUPCLWngel8T97Aof+/Ahbbf5Czz90kQpjl4rhj13ZDPPdCrB+N+CJusYsF\nzfZVOT0BabZOJVTzwDK9LYyHKJh8plWF4cFgrpKLwLJQb3Oza59XCh9w5WMQ\npIFZ\r\n=L5kX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKxjP0lQmRWEcu7SDxtu0gMpqNnuQMm32QJuCyVvtYDgIgRnhhlnkZnIXVFiBsMMmcOphck2x7Xz06aU6AWGXPKGg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.05f3853e.0_1590082399619_0.4657608802219404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-ripple":"0.16.0-canary.5fe61f4e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ElskCyrXv0boZqo1xAuwoMDrakt3FnoOy1Zd6KV/BM5Hb0y/1hbkkVL1LHVxbMvcGjtaP5kVF6hpYN6m2+jsgw==","shasum":"f9a2b111d5d05061bb916427415a5ff8c63e4c89","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwm4CRA9TVsSAnZWagAA0q8P/30NNqGvmyhKFPuN8dVN\nEsf6dO4bNtzXWf7XO8ICSJZnbkq1Y8Wo5jQuWfo3f+0sde+TRiDdk1jddMKN\nkc2YvZecvIXOHpiG2BWHTccN9Cd5CivhMmwB2/p6GtjW3VfQAys4iVPyUpCk\nHo20x/xh2S2x841H9HEYwSjEAUqu4U5lrVlvqts4H4rhzahs0MiWpwO2+l76\n/xd7KKCWdkfHTMhm1Tp8ePUywn2LiODBERXQkh/xx5UCh1kqa15GWXKLug5+\nz0c/v1kIcPIngwKMOyxf7+J2rRFu+oHL1RMIY0L4dS6VrSxK8s+faQ1hjRP3\neZe7wCHhYaoaTUmhXlcnzkd7tvhXUbxLT0ql3P9vjGqcGB4pftiQBzLMp1jy\njgAVhc3piBGSkEjcZn59eSPCwi/lJ6VgxZd6Rrw7k1x+l07fEnQdRk14s0/G\nPcHTjmwfOnGJ2n1qkTase3FgkIFjbayTlbu0QZytz0VA4eA1sMcXAFBjVktT\nqLcTeAnzaDnWBHNtuH34Sjp1DguvFkP5hxzyyiui+UHOvUcHo2WVYa8fb9+q\nT5NPHtl4WjiALCmcf1g4iCx9HT0Oe+pShI7tGfWNEojjYG73311u4GkoaE2Y\nruX/J26ilQfHqR1mqkPGEwGcFA1l9f7f5f+i2Y/lN+XwK76d06+NQKN+dPkO\nSr9j\r\n=N4Zs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoMJESeVyB22wC7fOPkhHKfoLGdS44QSt1NQB8kSXoxQIgAXAWtvg26OYXtRcJkexV4pVz188XLotS3YmUMSa0SOM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.5fe61f4e.0_1590102456133_0.8231442989882258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-ripple":"0.16.0-canary.17d33745.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ft7AAyHSuvFc6BnyvELhJrmYh7hVfqXzCv61gKdIDxWtLCMZvq0xoUMjJyCCGWfOib15ODjuarJS1/NhgBd8kg==","shasum":"e2c5f46ea4af00e9833a3df3725f8ec98017962c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUA+CRA9TVsSAnZWagAAMfwP/0qNsyiOqIUhVXpkJW3+\nCJANbSP4rTCw5PUvyLx3IOrFZAnJnGYQhLBep7glND3ZvsVT420bYMLuxdt7\nsCVZSIqXESnFeyuej01C/TXIrqPDhR+ml7kvM/1mXqC1XbP6RXbZMRCCVrNz\naB45TrAtuZczDkuosD0+3uijwwvigXFXvaVvtJKKItISqTeE/XvUqsvNniA3\nTTxPEQX4huykqYCD0lsb3RO5PTuA9P2PrbTWaebRmUzPYIipMs48ut9x31ac\nBjf9EVbET4Y3oOsuKBPXa9AVXdH6rcE2y3j22AXak6OF+xfckiJakYTcIaX8\n3B1zwvEH3xcCBYSU2iD6aIkDsqM+TdVpeg1B4JxG9IP84YPX6oG32nwRQzBa\nmseRZ4oMBAyMQCe0kpLlT8TkqQWr0I7OMqivWjmIFHR4lWOKTqqhGjb2GsZm\nHOLUcA5Vvq+mplTie8mbqXMM/xFZeVfuyX3pIivW8S2la1qdMGJ803PjABza\nD4FPVxb2MdvPRbhyF/tz2kQVoMY21TD/e+yAYgXPz8Se1sNYF/dt0BggL1KR\npFM4tLCLpRq1nigfS3gbeWjBtpG37hr1gZ+IC5f3wkEGpjbmLcH8d1cV8/Zj\n8s2XpCYXeElOaMPPUJ2EvO2XtkT8AAwQ71KsZlcyBoA8JpQjpkjXL8v6joOm\nH93Y\r\n=OS1d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7YQ2VXqBb2RtR3SViG8SpCOnsq+ot7cnqXDjU6deHHAIhAL6o2O4jLcNqBFlBVNvaDs39pMbc9BIT2XsOgjA5nezj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.17d33745.0_1590509629848_0.7901910682107394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-ripple":"0.16.0-canary.e8b52f5b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-U9Zh52HIhs7FAuinSJ9y65ZcQzHbbBMz1HzKKhtBa4+df/9fbP9VvuyFiloXVq3/hXyVKz3SPEmYsXWLAtlztg==","shasum":"ac8ce5e13e8c92b8b0e6f086cb48280f77f0a757","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMmCRA9TVsSAnZWagAApvcQAJJpTUd7ndux5vF3O3NV\nJ/iB+NtTDI4Vv4uPued9b9r2LRTUwCns2s/BxJXH2Ks/U0vm4WFLqy6OrDWj\nFs/j/HuUz/v6c7+WS8Ba24DU5btoq/S1iXUIuZSTyd4oVypWdDcc9w2rGgEb\nfSNfdO1KbtgrtyBsRceBjMCfwboa9uohw5/xTxBnxtri6Sdk2Xbd0YgKPnlt\nMPtNQm/Bz5k8tAVHC8CPfznSR2Sc8jpIJrI2gZjWzd49T06GRS/NSuUWVf79\nE2ezcQgcGMnHb9dHwTVimBCQ9rFra5Hhz4b63m3P1b7q8uM+BjWHCEl5Ihwt\nXFjRj1uMfo8i3AGDorPG/vY8IySZjAXteQmU4aKTiEHnQevZyoEe8p7RzRJZ\nI2zeSvN43Biv2Q6/XuYMtLUriACdmmu0RBwLP2ObtLBMPzljuRS4vh3MgKmh\nXKSOR+tJ09dXDj8m8N63OnU5dVRPW3eug1sDzuqoOLVpvNgs33RezhC9Y0R0\nJM91Nd/xbRLGhEz9R2KtU6kFFLZfd/ZOchYjTSnkO4ppFaXG+2NIEaBCPUvG\niw/OpqgHLn0GLpxVikpWj+mtty5pmP0A7n667K6OGX6aksqPOGWu2EWf3nEw\nAPEtCZcjraNNFYzBgsOgeOef5qOXxo9u/NB0eUj1e38Gy8m2aPN9cSul77KK\nztx2\r\n=FO1B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHr3uxh/DenrTCilsKxcVDyPrY9jO2A9xCR06XZJ3vOOAiAjou28W7uKk0emNgQ1i5eZqJ2NZuXHagomys3tZQH7Gw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.e8b52f5b.0_1590518566485_0.5468582906495019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-ripple":"0.16.0-canary.09afa0a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CdW0bVy3BWyBxF6VjtKXJW8MT6wuzHyE1JwpXXyovdsjPKn3cGzKIX6grOJuXILFA53GnhgJoXJ4whXGNrg4rg==","shasum":"53aed4b77eb5e1977c77d75b8c48b0b3d00e95ac","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2lCRA9TVsSAnZWagAAadAP/1CJKohmnG47EQqr51OU\nUlAIi1BTJrMUUGK5bNdWiqpfCnNx/c0JcFtMfRj8sWgeq++Q9Xq+L2Nq7wol\nASeo7nRwbeg8GAcT7FfcL+2Nx9hcDfi2xlKe89JycApTOJbxNQDVetNUXbUI\nfMDNGNp6tFw0gcxOjd+KzVd1BgWhsMAlrZKM379Ad1lm4Rc1jUb6C0EIMLB2\nACd+1+r/7BFXGvVXMTuWImEgJOioXX6Yo6998FEokwM+7S2hfLG/ZatrndiH\nBWQJjufcqs/6QNjsrBcS8L5oMD+RefvDL/MIlBYNW14aq2IdWCSlieiPysTL\n+EbF+mup3uzo+H+RT5w4t4yvc93vY8PRWzvzZKoP+zsi8for/Y1IHFs2Ne1r\nrdNu+QHtPCjMZLzVjUdbRJdzyek940npqYtSzJMD/aiYancikXZ9c+JYKSev\ny/AcwYOTxWIIMStILjPvSX9j27/JY9iMsADSvdoBIzWX0TC1IEvSitFFB8m1\nO02FspLqrRFQuOlz+1FPwScV/yZvEzHoBtvcZ3lcxePG2mUCzMfosTu7fqZt\ndSOMnV41lFLDwpbzNXZEeukspXqcN4wqfE/AxCDEPZ51g1uth+WKPE62ZNtF\nP4Q5hT4QHBe3ViK/5OBI9Y7VXs6Fmm9nKpxXc8DJ9Fj1pZgPzrJhurIU1dk8\nET+b\r\n=OIEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4XOSYf14xo2MIiSs/g9M8twOtMoK+9e6Jf1gVcq6CEgIgd6bMMrvlpcbm4y6vk6VkEwBMn9X1koOYwrc/8QuquxA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.09afa0a9.0_1590529445030_0.9937452456456835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-ripple":"0.16.0-canary.58bc9166.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yeo74PIVclSjVVMlIE0cAgj968gcQmNbnTJmNAQ6xPq/nDW+sRQ/uPLCpldKAcby1HXDcGQxxiEN8c2XwiMX2A==","shasum":"00564421c2d5e881e29ac8426d22c97a41becc5a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSfCRA9TVsSAnZWagAADPQP/21vmNPlPIj3QxnFWa3b\nxdKBuNRDOjo1crBRNu7sB76P/0UbUHyfkLJiOhT7VMe1PobtSUFfiAbe3dfH\nfe1DFn6dMGts77c+DmwfTmi4Y7Eo+RyBcoSZhVVLUaJndOTyjo1ThmUntyAc\np9lYY25n2hJcgGJBQ7jPG+GrpodRQsOJX4GmICCgPQbPndcMRmwlgqw4ABPI\nrX4rUlMOlAyPuI8ECIj1eThIC2SetYn0m6WMzRC+6nnW2wTaQZM+8FMBnYFw\njs76rv5j+hEkM2E+iGBukBYv61WDv7FCJmJ8w0SMvH2lyJ/dzTS7hrjQA7Cc\nGkvihZ3SYcz6S88OfSfhEs3GjWZWk5osfExUri9yXyHdLY/GKn4ilCQZ0nPP\na7wCMvMPfNufbfBIcLvp0TvFl4rgjKjObIZ0FBoBpjuSK9xHL+sa0c9qOK/H\nxN4ucwCe19eq8LYyReo7SCP4z7YToZCcXLQ4aFnqFFw/0O76Kn9oF7HbisEM\nSmX/wXj8WZg+V6jQkZvAd3iN0UmAXS62Mrsoa00naI+TqliMhE/8vT+pYT24\nqCNk51IiCR14aJDFw1ueOs4v81a7V+rlBs8HyDUZV0SFqlNO36gs830ZOvwq\nana8bbecksQh2rkCTH1FeYEkygvdQII9SqezZH0dSdAhpnsgS2QZM47A6r2L\nR9gU\r\n=Zuzq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMhfB5diTJEJf/3h5Z1RxwnRHWNePtfCpl150j+DSFVAiEA/SuEaxXQ1NksxkHfxxfLBnVmknfZjlto0+tIdbUk9DI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.58bc9166.0_1590539422660_0.18162897571648617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-ripple":"0.16.0-canary.43bde144.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uOsZN8BkypKv/NI5HzhNzCjlWf0kyrZJXfcLViCR2pfxsTvnv6OiYuN0jT1CulabEUp50STyUJcQLkZzq2iDuw==","shasum":"4626580ce948b71ff78a16e0d45048fdb5f21cfd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrF9CRA9TVsSAnZWagAAl5QP/33iYCiKFgdh5zWKZ9yQ\nrnZz4NXAMxGUvZu4a3mcxakERGKl9pCMnXOIMr/DeO4WL4183QyjotzwUkVD\nhtFR8O/KPi1VRxpLKfJFLZUJVDlE9yHoeFP8hPgt8FMXiCJOFiO/jty5uQx/\np2X0kY5iQhQP4Ky+G4Pq6SERaSH9U/27uEPuLJi4yVQHIpZt/CTzORARlTbj\ngBLBXUMfklnVIcohkCNNUB7vEpd4JsNeyNYmjwmXxRXjLUDQzDjR21a3619L\n1bUFro+Xuvmh5pCdxSUPij2UeeOR4GjccmQGGmfgVA0rLUqh9icOIRRwtbNi\nKl6UJAQBC6QchmBXg65B9DYKou2SeBClMzvGeVn4H9Jd5SKwOYq4OR/ig4+2\niYNg4HF1Fj1M56qd0JY1+9ht+MQKUzPuw8i0GfZYA4Si6VKpGAx4ePgHxq2s\nevv3rgxOoyFn+5AttTXRoVCc1vTOr5Dzc37WfWpiVSb4fegCxVFGM5sHR8GH\nElR8rHpHU5WWaTqkUXaCIBbkdBBbJ8Z2Wt9TYQtrxOlcDycfn7WKq6LlpNk3\nrjMsLp1iPrDhDL6Dqjpp1sULb685evLEcP5m5vpYSHjMme8kd0lEz7mU0YMb\nK3zdsGRWijKvmjataK3QuRAD6zXDxRN7Vnp+jBnYxXFduzRewdWncPm0Xgwm\naI59\r\n=shQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLZBh0CKjZqC2Hk+t36GbWTKt1vIbIyyq7jDJ95dV59AiEA+bXnyrytPhsWESz0yoeUVJSaFRYwMR4yEpfrnOjpeCc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.43bde144.0_1590604157032_0.37912050092912297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-ripple":"0.16.0-canary.51067bbc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EH1y8pxLbqGE62wZUPJBi5zcqusfEPDmt7guGzO3DHlN6Z1Id06ebMC+AVP+yAf55QhSAGRWBNAEqFPZfk+OUA==","shasum":"2a644a698f896c675641f584094af2a46119a853","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseCCRA9TVsSAnZWagAA45sQAJy3ju0O/HvhouOKEs4A\ny7gxH0V6ac5dcbVXublpx3Vrw0dEsKQZlCY4di02v/NeCs11aA7rXfzheh1E\n51Q3AJfsh2Yn2oOkwdrLnHhGCC/lPFMoN/qU6b486rg8Du2wAhHdMDi7A61p\nf+vZuQ3P7EMm6cpGxLxpz6k6FBoA9zjXM0aLv7NaRTRmkDkx9QB+2W2EpuXh\nNP+URAJqkBR5z0sBGPEC56ytHiRVAz5RBkHIOzk8SPKvRTXJP6Crg7pAe7bq\n3TLWX5dIc1WLJmNTpj6omy+QD3UAfp1hgZZxwG05pp7i9vPYO9dwpW6TgXhE\nNG/NDdu47/NvelVhTcOfYKR6JhN3W1Mol1Xon7xg/yfKF3YeEyP2mSFVYMrR\nU/qDpcC48WnRxteOT7GTyxVbmDXpWfNTdQMeCj1P+SygPnZ81C7p+Gn3a6eo\nJo4nr8rPYy+SM7EKg2z3cBZxSU6tMhw6TLQwcF7d3FTqanBApqfuMvcpAYfl\n1YACPlZJ1OJYDVTqK/1oXhYdJMEy2eLjot5uLSy7JYvi2c27cAn4XtcefhCb\njni28bmpmXT53OBtT5ah9ZXPCCoMalR7CS9+n+JT0j6ouzr1b2V9e+yatShm\nOBZfmQg0VHbdpRBR324/wapWAYj2dKP31hFzGe3ymKBOkDBlxaCOuas6E+Ee\nfg1U\r\n=hbVX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCEu2GZjgh1Yfi9vd5ZLgfZ8K+IbIGX6Sgexg5guLdGgIgXwJHw/a6NOCgFpnHXztKOidJhJAV5M6QGWbqgsJY1S0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.51067bbc.0_1590609793775_0.6962104544378152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-ripple":"0.16.0-canary.92751ffa.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Wh7r8HKTO3EEa7PYk3/dcb8h8WfjEMIiXkfVlF8rzyHLWFLsTiGGaftUqCmb+FHpqLYz2zY7gYqOwhwcxLeEkg==","shasum":"2decce7e4f55b197e8c9a5ed7b138940be1c1a60","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1hCRA9TVsSAnZWagAAZZ8P/2/dSF3sAshZK3xWS8Oj\nILGlTiDatCGwJZRaCqNy9tznrb3+5JoFBp7mqzkgjf9Md1Z3Vgp2IwtEQdYb\nfCkZ2mdYA1v0qky8/xjXS6QSGJDgSgOlVWKf4d3fPC1+C3fHT6UqmoYlqTDW\nW6AsCoTDpfRUkTj8kcjKJHe6dsXnspajwumwyv0gMKJOKgtA/ER8ZE1ngMDo\ni1gHPrlmAMNf2fJ0J5pOtMfWIYYFvAx9uxDIkXkUBW+EmEQVqownS/QXkZQz\nyu9yQS93LOk4/UfiUjUJFG+f+wZCSqBu7ecCTtsQ1U08JYZVi/CVW1TBcAia\nPX0qSrWi8xoVrzJ2d4JmJ6E2kdhTIi1a5gJGGIii6syHokiKGhLHEfZVT53q\nOdUGBXQFYToZH5FYkG6W5rm5xRYvg/6GswtFJczmkR34C71mzp8d3UGdsqF+\nELgV4CH0fHViAJcPfPFRbl62sPBpEOyiYgEfC3SwJY9CWflEaSfn29BAVe2T\nVgtOx+wxjUN9wCv5dhpktNzBkaCA1Hr3Ryc4F3dXJf8/QOeQUOLb9dN+HPbR\nEUrdMiqi6DobKLTZie+32eDFy9SkWvyK3LGzUvgT/weOu2Z1v0ZmbZMj/JUw\nBDIq0SDYmF+SFJcIt78ekzeN7qerzDfQ8TJ4acpvLlZwJLWRNUzSM8r2UAtw\nMug8\r\n=Yfq5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBl7AeHDlbcaCjYD7S4HTAgUHNYLydwIwmqBb6NfuC5eAiAIZLimzAdPLTcuJs7t5DZKlIMLSzbbpvAY21PWjZOYqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.92751ffa.0_1590615393064_0.3546712354125625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-ripple":"0.16.0-canary.aa2b40bb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DUZRezOmoUUO6ilWOV204P+bLvXhbTORYmDL/mfUZ9A3NDTwEwR+T31tlb7PXpzufst70MlZvrtLoiMzcy5UIw==","shasum":"94f42ab102bb2f39fe3d46ed5ece6e228c71bc41","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A21CRA9TVsSAnZWagAAxogQAISIMu9UpZjbMv/QNfY4\nABqmXWRsCK8geWgGB4XLr7PJf1ooGIbc+2m8hrQDpqyCBOrhGauy6GHAAEbS\nm6hbrMhISqPFojaTDw1uSrVpktXOyQ6MhL0JSOxe2pAadQE0mhCsyim8N2YR\n8aXw4xfPqjtb+Nd4eH/QQcjpVVOT3avZI53/7v+mxd/W7ju0DLBVobTQivpN\nlPa2vSIi8BZGzv8Z/ZrA1ban6YeUb+y2vvqygLOoqEJ3dEL9mYNBHcIC+FN+\nsf5Ee3ig2inhXf7FZphGDq6veHkP2Mmn2ivhvwSlCiasTlvPhFy/Ec/wSdoc\ngrFS4r78xOURrpPAxw56uVEQXUjHpjLdaLcJW+ESHb1LQ/nJfMcUyuS6YQNf\nya67B43qDjWGa4nmtzUyMhhrHqPZqHByldLKhbloDTpwGm8oOpRBlyMyXdHf\nlpmYzFI31sQp0VqdtJFqjnR9lCsNA/XdEFz1jr6P4DgnDT3+3AkbvK1tPCmj\nlnUzKsD2jb5bOYvngj6dV4BXYnZDAFjeyiDLG3HYOKrSD+W02U6XRFiHkLhk\nx7PgLoo//DG2tXP0ADf7x0Y+a/gq20MEFlx5I8XegsYs+p8kv1kJF9JKZC3K\nmyUOLBzBNuQDKt38jWxKvapLYDNBAE4BTSTDgCIW+7KdCtynYnpEUMfnaLh5\nmU6U\r\n=hJyI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDPPpoMLBgFzFWs0RVvD+SoHk0CKMLDvl1ZyYqKefrygIgFWZ6rfHtDKlr8pz3aVgm8CKchAqZ+twsclFwl/tNxTM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.aa2b40bb.0_1590693300904_0.21571707707759336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-ripple":"0.16.0-canary.1a870a01.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RLlN1ReWyfXB3ScvUErthJANcDrkGJgCWYKRiyRdeD+3TebW59eLfcRR4Zxokwi5+9WwaQaUXRlIWfjSNfU6Ig==","shasum":"a2efeed7758a5134e4637ca4149b8715e186bc58","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqwCRA9TVsSAnZWagAATFAP/1KbAjonMwnvyE2M9pcR\nzxkj5Pvt2cxZiO0V7soMU9w824a0oPHQYJUhHJPS0V2VSx10Ca7FDA3WtJwl\npaNNL11Zp7GGYAamj0YPkhBgssw1PVqD1wmprhXAAm82xtfyiqX0AuDKfkte\nElwJFj9zVzjEzxseUiqyjltKV19BA2OskARYPCvBEopjnRHDS6/aP0yWsjW/\n6YEVgIE3OM5aPjmPJ9nb6ZGF1iTBYPLxkZxed90t5q3P77ehRowpzhoxfMxb\nSQ9eM3cCb9NQzA9JGU++NK0SiDJB/XTLREISblI2N5Xu02CR6LAgYfjKhTks\n6Q5aiYLfr+67AVkdINtfvK3GiTX7W42QlQfe3O4hlci2A6ZivNdNXL1BPOz8\nZbfAbGIRG0Kx1m11gD5QjnvOp9Sr5dRWhCD9OE1MfymiCigZDO14EXnwQmkz\nygs37j1O0VVMqH8Z40wNPCp/4eHgE/rZgWvw5q/a1TC8DZ+vRRe4WXWNawdh\nC0QRWDiK0Kz5GH42BxAsbBKIvN9jCi3hl9YrlA0QWL1CdJ2WkEAEwhc+C4uT\n7dkb/4NDO6hXWxF5Tm6P6hqEAxpxqGgXBjxOg2f1H0+1885UunKeSbjWKp1c\nOeyz8mAgW9RU8xqsHzkhjQavTePwf6l+mhgjFBM9z6IlS99VNbILOdYjFiDW\nCT/I\r\n=MWPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFGkNdS/kwWjwyzuzvMRCX0B+yaOb1JZdB4kHKdgL54zAiEAkCKuKxo2+dWNmIiQbGpVEwiQoUfRXG24oTe+Ddom2AY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.1a870a01.0_1590700719768_0.550204550279747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-ripple":"0.16.0-canary.ad57d086.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Cw/83AUazOIWnNK1tWvz4PtFWOlaYvZZS8onXwFBO33cN+IVtTBt5QK7YGFHXE/JUmKMdDBJS1eGd4TPRGji1g==","shasum":"95b49145fb41fb45e50e8eb3e331605f77eaaca2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":100381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z95CRA9TVsSAnZWagAAwpMP/isV8TrUa0St2qdypNif\nK7mNqNRPc6rLb6XEwmOHVy6nOhiQ/S7cV8/Ijg2xEOKq8wlMvvulAVaV4B8U\nVZU9FEDRisloIpxf4Fe8uXok7T2gC7dbO+TjEvjODiYvr5sVEBWf3IoSO65L\nRsd7BRiGY/UKPH86V3HExyZa1cpNLw9fGUy9zuWFOCHPwAjCA41wWx7P9/HC\n9MCZI0H7ETlLFSAkzM2mMQi5DojXxZVNoUxJZzRgIfy6hd9mvDK38b/VAkn4\nFJsDlCNOtsO+M4ZooUtbeZVqvB6AumCwRxhLXGVx4tjwUUc939XnZE2P9XhZ\nl6iZmnb2G4fMAD9asx8i+wr2Jl+XZip/CcgmSjOHMchur1giRnV79ckylQ2V\nBo2WfPdv1x5usRjEnFJ2sICmr5twMxoQCGyxwMnLlW1zgwrVqqygCzholKIa\nVkswIL066N5dfQmSrnNBZDbJiaHDc601UD9ejTb7sqWqUKZeSX2QACxqsUVj\nAK3pnqTaxLzRFXPfImrulmvrbFiJFbNSYq7LEjsMwQZ5P1K6zd/zOL4uwo4L\nlEkrNOWpUKq4cQ1NalfVvHAkq6GasU2W1N5eAKSBDDhYjgL+80A8VGYaBzmF\nWneKVZ+1nMfLX+iEGXtx7tVWQOj6cnz6e9s6eczSSyfQK5uCqxB77Tj5z8oR\nblGI\r\n=zHwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwRXeMNyHAa3u9hV3nAiQyCTy+Mcf5mpQvBXgV2h82jQIhAIABdwJs90Z9EKyuUuIbsFa6kWMG0KZq0AIjlWuogFc6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.ad57d086.0_1590796153046_0.5450350843867968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-ripple":"0.16.0-canary.3bf2b4d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bDtalMAFpXb8M9HzYWToXg4geu6q8qqReLhuNaB3ZL8Cv6ATfbhT4PSnoAju0sTJUFi3UZjbaq0FuHgWmFPG6A==","shasum":"500ca0eaa895ee4db0aa3a9be378c7992608068f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":100705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqaCRA9TVsSAnZWagAAnX0QAJ1u81mY5AgYsyvcRBzj\n3t+Y5EDrK+pFA9hO6+6z4d4MbM6+M/NomnPh8U2MzCKvlZsMOltMeO74F3Ov\n4Bb0cSj9uFtBINzaS5kGplCmw5X11KXjcghDMkruJLcvNsrxDmhEP7f8xt+T\nshbVQNpCTph66Uy1GKASgtpek6/oJ09YPYbSqF9ulFKmW7EkJpdnnge2Lq/F\n8gtTSUQoIG7AY4JTXyirJx4F1rjB6XFkgoxZHyRY3IrGv6dsL1i36VmV9Usg\nnRnYt2JJ3tGUmuOPhrVFTw2Uda2+jb9jLWehWvpTF+m5cO8fI8SK+hMaEX0Y\n02Yo5NabuGDan0cvjvAUw9XBgnhGB7ht+Iag4vYA+iEz8CbAESUV5th8unOE\ngw2Z1FCfgEsgLzgF5sZ/ShhG25CG4fAZWuUTIA+4m4w/GA+THPe5xm6U/Vg0\nrasJGpX3tzSHu/xNmNVjtTXW0XxrhI95zMfmg59R/hjEkgdL788tIYxYz5qW\npGh8kfXIWc3Ya6WUPJfuNQZ6twrR7QCHpLLtWudDJeUulYXHwTigXftdRVId\nZHBJqd/b69u6duVnBYJgheMwVqRUGmyx+MHmkwmIjhX9b6RbQZT9AXmIk+Lf\nWHEO1ukM4pN6FoOYfKDQclmuCtKMGCHC00jYCdKzIQytr4mIVxLQ8Z4H8eZe\ntW7C\r\n=MsUD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYlNKfjEEGGvYgkHy1raIwjLojzwFCdSmgDD18g3bX1wIhAKiAKJNDbRFW64+tf16VSdzN38kZSOTmpULuMf3TkJ8L"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.3bf2b4d5.0_1590799001860_0.9211108385525786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-ripple":"0.16.0-canary.ac05f090.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0q6PAOTk2KYU7M+H9cVpcjL3Dntzxp8h1JfmUoQsPSuL6exYzXbpRBEaBHlZEbrVTAdt5PcdLisSy7gfRRYEiA==","shasum":"e89dedc5c7b62c9e141a765443c616f20c50628c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":101187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnMCRA9TVsSAnZWagAAACEP/jpp1SFwQW2rWMDWLQsm\nDcvpAAw3fMVtswS2CjygAnSDNHRp2teWX/Rmshx9HFkpyXeR95tKJf/yX4S9\nKyLI4C8mDks7cN0GqkVk3e1yzY4p9hA1bnRmeEatAAODlAxseZGAO+rZlp7C\nh+E3Q8k5brEukpNl8Lync1+jZhvuH9FYlp84QPfC9A3rm1XXqe+4ZJUgj1jc\ntAlNLz8N51yZhtXR1RQhS7rDHwqP0hRq3AXzM6r3f1vyumgI7NIkGpOAJ65t\nYDgYsdhvC+oPpDvvSx5Vlsf5aXvVHnZwThkng/QvZBvONkAMa1I2EQmL+0Z4\n/LeK+J1a3CMN5SFyj832/whrLEYoKLmMHtVb9H+K7v/9UcM6lPGv2hlJeECx\nSkMtSBgxB8AtT8eLNJut7GwGiiqbUaWa20lgr6xVCN8uYM7KlUUcHzw7vKQ8\nD1cDwybe5BvAldOq9J/36qF8+ZupufJqJgjUecXaohKPk2tUSYYbplUxuQV8\nqGVQ0LyGSRF9CtNRgg0VXsM2ZiHCqV2apbLAVyqnetOchTL9QgZ0UemD/r1O\nmiMXDAn0aJTFVfOFsmmkclBPcRg2MPZPtBcOPxMvvtG4+hQvYRwgajVZXwhf\nW1bWE3y+nifc9psXB3odowXN7nRdn540NgRPkpDvlavwci2BYOSCIiB6c1HK\n+kZj\r\n=XixE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9+TmLxnnlI7bB5mw+wDXXN6YKgy8lAebdDlOyM459vAiASqjKUHYmJHCufquo8QJQ8BeDAg/t9Y8tUzqqgXdiCMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.ac05f090.0_1590806988298_0.6433653719108907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-ripple":"0.16.0-canary.0ba7b095.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5sPX8xSP5rZq47KHNuuqtYcfnasN2Yok2QNsEYgE5A7e0mBWjGG8flYyhgXaso24snaypVGF/Ogl2OpjDuWGvQ==","shasum":"4062618bf2915c7801a55d72965b8ccc4f033da7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":101187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctgCRA9TVsSAnZWagAALroP/iz4yZ5NoTIIFkSGwdw9\nH509oosa88rxRiP8i+jg+iqgY/iLpP45A9qlVZih8KLxwgnBQnNOZp0cawtJ\nWzSzxiXlMOMZGvTesPWo6L8VbhLML5Fogr84qt0OmrM2h0cp16mx2dnpibdL\nigLIvR0Ad/fwyS0Dkic0J/G7m390gaa1ZBC5NcCthbVq5ls+fsSTYbuL3F64\nZo7RFzi75ITvvtGn/+O3Kv1DHl2rq2iFSTcnvC9J4tRRorAPr8nV7wW58kU2\nf0s7b4HsDzLb0JWGt3zV72o5ORdsE7naPDumd7lvMX4RGz8RiiTFqP+m1qBI\nprikM+5vu9uPDTbB3h7CZkhTSbA4TJb1qnSJ+UDkwp5wIFKWXMjpp9enUFUk\n28v/zu+zTKwDgSrGusRg5DWmm4/FYJr0NQww7BdX11jsZrgAeCB0CVbiNpYP\nu/UOv7Qoqj1+CWuz9GjvjNYiSc1wVl9EXpAy0ZrStIP4otWpRfBjVm2obV8q\nlygsxq5kSMqs/o37yRgbIygMdbBjLSNANwgv83MMFOkOomUNWGUbTJw4ztmb\nPokFl+q9pgAUE3LEk74l9kgTSRoMqxKcHOspmU11vFAxRKeofc7xV7ae2cMj\nZ8r2CHsFFjnu+DwmLQiMrO65RisNxw187orIWqfJQYjXYIRcRTi25bgzuSHa\nWFVR\r\n=wdn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYoVy/C6WOSkgL/qKAAjc7rShpgxW/9CS9+OBEasMf0AiBJkzxWd2++FDgjEl5obZHXYN4can+bK1tbVvy7hEujqQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.0ba7b095.0_1590807392167_0.22676915960020505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/checkbox":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-ripple":"0.16.0-canary.5eaa9bac.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8I+O2WlsgZqO09W3xLBIuD9aPv6Lr6fvngG7U8ftOtfbRgwWVh18EJivL6H1rbB70lJaKCkX0rbzKdOnaCkjQQ==","shasum":"cdcd9972ecb2d466457dac1d6f616433cc55c1f2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":101187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8yCRA9TVsSAnZWagAACU4P/iGcQGhgAVFREXrbnazM\nVEsH0QCgOqHRHvYYr4QgKCDd3ja+MJxS4STYMf2hYbDQpTAAp0iAtpxlrRrP\nnW3NkyaUnnrXgVRkfEPIPByJO6mmicTImla8ZdEpSSYzNrngcBYrwSdPX74c\nCdDcFkWFPOJcJQ8UpfTu38fdGODkCbAT6CIWUbj+l4EqOwvNhqCatoQll3VL\nQ76zC/M6XZalYt3K+5TQ4oelG8UTEYJvedwTk5seFp3jlwckpC/lx2qAGebm\nhFlDpe9LugLpeAP4Pt2i6i/O2RUTGZshmlSs0NlFJ+Hro1jByVI0O5l5azTz\nk61BgASXkU8WWoFUkOrelxXEe99KH+rmqSxtqk48z9SrITfvKfAYZKLnUy0t\npVMkIyuwFJWz0gF0ReI6EqUvQd726mk3kAudSt+Rwttz5D8xpN3cP7ZviFO4\nmDe269H0diGQqIjP198crvvyH+ChqLOm+KwkhZWw9Fd26827DmxPmV9d1VgH\nkmdRXRlvncSlGjoPO2uLqnd8u7Ub1U8gY3hi7LLxq6khpksgQ3y86DTkDCjz\nAa7d4Txyxt86LysrvFDXYm0AVQbR03nVsPraVAEnIkHAQcfCfUwKtyPK7VBT\nXsyxzHB5zTB0hDW4luqJHulP0SDY1nhNoQdVRu4ZGEwGDAK2KjzC8r58/fCj\nRv72\r\n=tOJM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFBNUCLeak9wyit+zwfUNT1aT2jEIN8meCtmxCYgReg1AiEAuZ1FeKaOVpma3L+iKJRi1d482YC7fJU9MQNlqcAL6Cc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.5eaa9bac.0_1591054130132_0.017793325680781624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.5677ac20.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-ripple":"0.16.0-canary.5677ac20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cPmh5+sjFzB9QNvH88zp8waGhnxYISraIfByqQTjfGSAYhoRH/+O8p4TOB7UYk8Pw5tvQeYd++nqQgEZRDySzA==","shasum":"86a693dda2caab876d4751c2dc6d403df3c90705","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":101317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXZCRA9TVsSAnZWagAA1CcP/15OI19FRq1CFtWHg2uk\nKNSy+QBGvWYQgboGo8bD+Q0UFl7Aaqk3kq0fwXkcrrqlgnDO8ZUAg8Yd9KsQ\nxu19HqZcH43FXU9EAX6gpCZ9LWbIrTyGZgPcfdY7r0MjTPU0cIXOzeIiv7k0\nFPhBrD0WWOIU4uDMIHQNLENjj/CYGPxcw1/lMKzRZlxcxu6GxWfWEM7utL5w\nmPLi86NaOowouAruWhVVVaNbgJNJ4jdpS8aoX4M6/kLQoPZKUQOxigFE6Hw1\n/Wut70UYG9HfReI9mKAECDFX/20V3d7Fl16DbLsn9NKN7CFnOe4gAEdLCogn\nkn/bMV99ml45HF1vISWwQfVUVaLuhNwuGgA9xh4bxGD14EvzcYUZ6nrC92bU\nWz4mqz0LPWQ5KJeWoO40BR7DJXsrpi4z0lsP9BQyH8CqrcxFSF0Nl9lSDASv\nh/W54VqpTqpTmvZ8TYW+QnxBOO57oosTYx4mQF+cmhBZcDNIePWDnraUdgsI\nuq8vB6NrzSSLbAdtOnk5gBTYMHR+08115E/7VSoJdCIMX46oCSo2I/ATubk3\nWQvhINwSVa2Pko0Q8xlHABDQCeMrWjfx3CK6Sm5HGzGpaJxasXR4Me/zmX1I\nPHp2AyzvScn6kks6m6cYoazkjW5AP1WJEIF0ITkMshir3LxgZy7HiqK1T27H\nbnX+\r\n=iLpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo8UKxFpRmE1TgdHRmbOt70aaFE/2nu5sM3OsmWdkEkAiEAkppx72Np82BSk7iF5ED0LLnYSPTUssLhcNpG3jIDZwQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.5677ac20.0_1591055833294_0.7329338968291761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-ripple":"0.16.0-canary.7ac6bff4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vb/qoQ30Nvlvm2uHGC+GtubEGJHLL2of+Y00qkopHCU7L2GWwAPTphn1xZhjwbCrG24Dd1xar75Vi4fowjW+Xw==","shasum":"842fa7c17bd3984bb34087eb750d465efc14e63e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZotCRA9TVsSAnZWagAA1Z8P/2VbHFvzrX7mbfaB+vXu\nrLd/9pRfJwxBlIoIyzjC3QmZJyKq/uwOK/MTd09mnpKC75/7jdluVyOPc2vz\nLFHCGAZO/TAyMB1UyssV7Q6KHfnPfpyXbvxIZkHWshiBYweXHOc/Umx0VhsH\nWaPtDvHNtKC2DeQ61jR1+ITdxxC6rnyNLTn1FJcKKAitBgubLN3JXFXDLxaG\n2SYWx8+kpK9ilyHpiHuCLrKCo98C9GEUbT2IVpbCiE+Zd2toE58XtQnj6Q6v\nYONmA6Os9zXA0Bl+MtXyV9t9s0XRy9a/gEJykQrsP8abqBNM/C5x2T0svtiH\nrDaUClvCvxy8C/CpW60WzUnlG1GhTIzoSgaF92dcCNDC3ZymFQJXvT8oaL1N\nqPm/72i+akjdKf57OwMH/nhkImK1S9CWLvgcUVlgWFFONrUcLGNUt3v7rB/Z\nm+fB2pJwPFx/60bbGQeQLCb57f53+FI2fRdY+gzkoBrGLol2z4Kq1Pqa7EZs\nUBbUlGlaVH1RL480ABOg7fotf2gDo5tSl0A9GOrGJ8YYBE4z5ZzRv1+gmYXk\nLYYzummjGUhzGjafVo08FOK4lxtzzHXa98Xh5Rclazpfh5z8RkkF8uWvTaTO\nj+h2NsXa6xFMAMWM9SW3BzorNIOAyevn+dDoVq45kbL4Zf/mgcRQ1kf852gI\nmxop\r\n=Pmse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuIq/izYKxD1f5Npj1HbwzufmlvxCseeG/hY3KXC0IQAiBKOxSZuu+D2TsswSsf1BU+bvoS9jAwmL2iNqnGVLByxQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.7ac6bff4.0_1591056941482_0.46509798233448185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.d45622aa.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-ripple":"0.16.0-canary.d45622aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-C0yfwcaNNdhK7pz/qfcYWgawNOHECE6nLNShwZAoriuESCHVIJzsaxgdGsz3FoVcKuQg4t33DG7uEslVSrFAeQ==","shasum":"14d99f8bb7917f81fe3a993a9cc1e6f8f8343aa6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSuCRA9TVsSAnZWagAAaU0P/RaGQfpsDM0IlgrmZ8JH\nyCWGLDhXKh8dqHRV0NJgUYGSURB5Fd785YaguZoIY1HRzkaf+dfRzoVoRKTS\nzQV1xNViNDAbcLEohI1W7CzUj83oDItEMYDYMD9MtN6qS/hvSURqsqi+kZgR\n3yCRWu0S8mMGGr1cfWpQ5xDTNr7pI5LS4m3Ve2eCSvGkQHreuPjUrii2CE/g\n0Tm0l6cIFpYYzgtWrIwloUBO72j84j6m2v7LMGklIUGxes5pRztcKGJUSGSV\nuBRvsy9QaEdoHw8pZ7sqTSe1J3OHi5u8snRloO2rLZrsvZK2pTR8XkHmCLDg\nm3/68s2c5HPMm8Qoo4KjLqOxh5B5Cvjtf5K2fcsVfR+ULUa7RtzOR6ewTs//\nq9RWN7IVSm4Oc0SBpj+Eeo+eSEJrXIe1XXneZ5AplX9qgoiF6jC3NH2W6l7x\nCtlYUXyP2ZOyh+I5YBBSNSfLJEMVlGP9/vDzn1KFJHwJSxfZi2TQGzSdL5wN\nTZDD1TCjkZdpih6EqyiUOawtmosMsPbLiUfnUNqbxcOphivwOoRUo90PbUDP\n0cW8GlQBo9SZ21WOG9ptt3ChRg8YpL18t+GC0lxSGGhohg9tAxZW6hxWfUFb\ndL5G+lGCtBOy150zBhn+w4vmBxh7Z06hBNANJi5FM7vM/CGLdhLfabaKcYLW\noqPw\r\n=m/Qx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrAixbAF/7wdbW22GfTX9kU7eN/yQgpojTWktTM0pwjQIhAMheAsgiwOymw8LDHsYRMy9U5pL5PTR+ZW69cOVQrHvv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.d45622aa.0_1591141550451_0.6297733697325734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.dc26c709.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-ripple":"0.16.0-canary.dc26c709.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9hQuXMTAzHy6b6uaGlZzt5FYJnS9JLwipoodRtsehErsm51UFhnZVY8RIsz8b6BhBXRynJvZAwBTkPQC3YTFpQ==","shasum":"db9d8e0f7194683d066d546348250965f8eafd1d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkvCRA9TVsSAnZWagAApcEP/2lnPGMlx46dP/0WJri/\nz0oW0KwzaN21XYkx21PPHTg8KDUEDfWeQeiDuYEz0gEXfyDKdrKv+Y/Wk083\nAlt5TEPHuwYp1Gp4QXvN1z/wVUS0dykPlCI/CLc8qOQzBRQv5zH0ix2a9ZvZ\n4U8I64DqzI3g5hcWXbMTHaGkUoG+wTNk4xgL/laTEf3h2DF5orQcLPGalMKX\nYbN0SGp024OTJFFp99AMXTdB4O/OZoFceKIQl4gMacDM5su0imoYgcc7rYun\nbbEQfEL17eVrJqPUqzlkCIM3ZyK1XkiT9Pr4RY0xHtoXBJzFFxbuN65OZZYA\nfnzEIPxU0s8lB+J4qGCP3KcuOtP/ory1Dw6PkFToaqLj0gezHZcrfFmWv9yI\nGA0Up+ieR1L6qgAp2A8x4cDBPk/1haKp9mZcc6xBQKIPz96KR+jeE+cAjsS/\nntZui5wQE6M3D6ypjHO9+rvVra0xiWg9bfhiCMUrUiSW9cd9WkHNU9mBhsdU\nSvrdI7+UqJCyYqqUx+Wg1J6n5C7lwhSe32Eday24rkO1WyZ8OZBhSCWByheD\n/WH9Y3joShwzDsmB4Z3VjP2HcTMOMTpYpUoVosDVWFRsoGj3i3FYNudM5jvN\nWj3f9bX1QseGD884gnwkFLT56KseNn1worp7EcRdG3dLaZkS5I5XjMO5xxam\nYzX4\r\n=taMT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIV/4nHWeaERwauEjvoikeL94a+hh4ONbBQe7fKc6xXwIgKCJ3zV5zpGR/QNHrXdSf/E0aWAoc1pKNmIQKnARJwBY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.dc26c709.0_1591388463486_0.6344293704857344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.b9baf6db.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-ripple":"0.16.0-canary.b9baf6db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ty48IEB0cIczmK2DRH3QeZotuG94bUPhPDai76B9IJ3SI1SgPeOdMtRtnGi1VXUU7UYb7lfMm+tYIsLJpuhaIQ==","shasum":"4f123f04818e4605fc888b981f84e3c0493a728f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmACRA9TVsSAnZWagAAsYgP+werJLuzSN8VZ2j5VE8c\nQJRj8QiAgMTC+IKIkNm42V0EI2tolhk6HmzgQkAQqLbatJpcPu0pfnXU3AxP\nNK1ZjNnVoHpElcBUw5iiKcB1bjyog4ykU9/zCjvWWAB/cN/8GOl4HizOT36m\nSNEBm+v9xCVcUDwPff3wgqz1jagqwJwvq6NViqxwtbwq7OHAbALGeHzUiXyr\nCMXlIEfZ9qqDqqTnON/9qgVfF1ZRaOh4gDIDoVa5cVPLv4jrNs7+67sbIB2j\nbtTelubgJK664TRrNOcsrkoRJv+D8PNeHSYF9AMWtDZGTJvauXbVGH1sln47\ncoE0cwfrKOW9asaT23hSz+wEc3GzJVyEuTUJ0Psdwjb1IOwTPI9Yk9AVxG5N\nr7RoULOm0+rTjg5SVlfsAjKo2GwALOSFERU0zYueIgJVar2AHSw6eTyHDKqk\nlG3ECZGY7GqdLMrBaGLKVbmEATgSv2+WBIh3EkAqFYEzeVi3aK/6HaSJHinC\n1FwVyBhtuU1q61ZqI+r8zSQqrYc5bEk4Q6p4qJhkbGYPMIZveDq6H2zakFAW\nB0c6MVrImK4je64t4LUm3ndfJ59wgFPoGcg4KE3kfVSKcJADXJMVEg/uNyR4\nGtwX0fAl64c7gf2juenF5GacRRzrMvy274qvfx4cYLzSi14XBzqBu6E6moDn\nXnsp\r\n=mwqn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6MmM5SksvZ9umPWA2S4oenrQf8a/KNuxgRRWuDYFlSAIgbnE5TSlaCV3VxvAC28tF8rXzs7WfNlFgoR4l7TQFigY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.b9baf6db.0_1591388543790_0.7205102216245045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-ripple":"0.16.0-canary.e0b8c9d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vjmJFBeQCVniQeWFZzAFGWBe6tW5UvlLsZAF5rziSUxp0XjWSfKIuYUiTLwPKb41hbGeneEClqn+Vb/qXUf9Kg==","shasum":"06e8ce301f8915590b7cdf3d063dfa433217cb69","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+PCRA9TVsSAnZWagAA/28QAJpNoaFFchARMV3vcspX\nsXeFiLypfBsqKrQtrmAqMLAs3yCFYfYTWMiyzvGx1V5dEObRRys6oeHRqdh7\nnb0t6/tql6M0Jt7YjlsA/SRzjYarS056fBykLEBvu5igof8l3ILQmxU+Olrp\nwe8xmpmRBykEGK8aCki0r68P9V5ds7Lg+e5fWGKJmjq0bYl6+/SGeITLKj9o\nD3D/6I2rkdsqQYN5IT9AVuYwvyqCDPaEDD04809mD+aYqhAjmgnvplYGiHhD\np5lg1cpY/DJ+sbFse0CWk71QOoVrLrqPWfFP88f68OsPxxoyMThhHjLDOVlO\nPr1OEXZQf9n5C5JjudqKx9sN7re2Au1r0cGSdX20av1wHM8DgXWnvzCngYlb\nDnwgRCiX7OF0Znkd1FdoUon+KKNwdcrFJv8Rt0SBaxJD7fUt2b8onsQGpbTX\nWmNEteJDGLzzFad6e13N5qXYJ31VzoYtZxPaeovrhzHmOrTVTk8J6Z0UTwIH\nHc7rSsU3pr8cHqZl2GOl8TK4djOTN28UsaszobClDxQv04J78N2OAdq0jRzv\nhof7vDqEctsojAXV98JHZUkB1nUYItPnemSHBC6624n32pu4INvilAxM89B5\n5DjGD22GyUmTCQvsuuoLn0tSaBwNpI49IusHL6ka4537b50/UMBARuWxOnq+\n2cE6\r\n=AZlq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZa2iVq8/jwRWdXsOU8UO04Zt0kgJR7YMsy+jYhXTFpQIgDssBA6NEtO899Oc3TIcJx2Zi+jfnyo6afXbnyAIpM2U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.e0b8c9d0.0_1591398287288_0.19105787624310877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.51552859.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-ripple":"0.16.0-canary.51552859.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IcDSimyzimnrq1yuidqCEvHQwgPx9rxQGMfapyfPXW5XQ4qLJb4CxG1y6WsKv26mj6Als6nbIfwUZKnN6eYpjQ==","shasum":"fd0964cefe440f78ea3ca4ab384fc5489b1346d5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRjCRA9TVsSAnZWagAAhaUP/2h+VhQAT25JJOC80x/e\n76ixjJLjYUdyG+BQlYnKZX6VtyDgD0Mr91qfeoahPl1rCLX8YIvghWwpUyHB\nKxXlMhpKxJ4P8vumv4IkozIrouz0j5lf9/c+uI7KF9MJL0w19CvrHdYs9Rxb\n13ERKdRIf97UGczG67rknlZMvtrbv+P9Xrs4slJPVDIegPKdvSo6paegLCC1\nvFkzrVrCmVTCyAzR4+Oe28z0PY+MrW4IV130wWTSze/J4uv/7vhPynnv8YiO\nCjcO5cCx433nxnG1VjMFLhFdkfrzs4Cpdo2gRsJHqFfXHYXsYzWPFv9tzkRt\nsy0g/Jk0IevM3vbaPcoTBVV6Ku3I6GmQuacQ7tafyn6v5kx+GenLzbZGe+WV\nAA891RqlLR1Qrm3V221yxGmqiy1dnQqLfgX8LeCjJQq3LGqVToUDbQYFj+ad\ny/6BExb/P0c2wCMa9ZovoZ+AgNIIfSZP5oAxFB6t1HGRbdwAreuhNa6wD4Eq\nvZpT/knWVJ5Wzpf34s48yNsEkQYERNpHXwD8JYLQUdRu+JFIzwFIqqzmHvnN\n6w1gFAlNIfLn/bHyWsFiJ17POks0e9B9QJNKrJOWbYzgBmzC00remfr5AzG0\n2R3c/sImStG/w13rfSeXVGEk9/1iY6ade7PADHML5rUvNxdm1qKi8i7pEKU9\nGDIQ\r\n=+RAf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAga08RF/VMlKV6oVE8dk0VSDZNy/vYGK1Dav18T0o0qAiBNgQ/YgLd5ohC8SVSpebZMTnm+4NSw4lV7bwQK+W11Ug=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.51552859.0_1591747682813_0.9989868926796217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.2e269285.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-ripple":"0.16.0-canary.2e269285.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n--------------- | --------- | ------- | -----------\n`checked`       | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate` | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`      | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`         | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`touch`         | `boolean` | `false` | When `true`, the checkbox will add additional padding to be accessible for touchscreens.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yiBRMLrl4SZYKYTu1hpRiy3o3KSp4f2pm9kb/bv2xJA1eLzHL7wAL/HVufcTko23aZQpm5t8SnLqrzd76R7xNA==","shasum":"acc52c71f88aa6ae0e28e4c17a5964775b5d9b04","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":101921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjxCRA9TVsSAnZWagAAwBoQAIssc32+Nc3j9uWHndeR\nZQNYSRP1jeML6lM8Mnuq81HVEI+8sU0OrGr2hwatDVh+Df/9NQP2a4ZTKbzw\nNiC8F1oTsMIh4KmuQm/OLn56/EhDmT3JG0XkYJcNX+fPmbGVaKl28JI9CC7w\n5w/b5ynfOk8D4ukK2RrDvk0vSV3Mvrc5KraOihff/vWq/iCK1kZwxbgdv54t\nrR7Zdku8oDOScODAGvdpzqVzs4xwbD6HDhWT0LOjpxdf8uyXlGKwLatH8tsq\n1R+XX+IIlG+N/WMiT5gYc8htKn2772YGEba0y3JcAb8yk+pIgxfLUf6cc6gO\nGrwfA4CovOihx0mRdN8HhMW5CtbqGd62LyweZqOYW6HkQZ4S1vqwBTcbs+C+\nzxMxiztZC+XWVSJn1yTqWnxPR/c1aZWufy5Esr+43dFF4XXfTnqBS4KNUUrJ\nS4LzpVwskSycDeirv+828XplVA5NRtY7vqrr+0TwNC9uF5fQZEAYVS9F7OfT\nKga7OD8OxqLPesAk2zF1i1WeyjfihG/iaLfWOFWK7QiM5FEtuXNIRMUVmbYW\nhKXJpbBrnyyjGpLNC6GG0G6w2GoTScEdxWxsrpkZFiLUyuXLZVZz/x5Xip/T\nW50ecbSzeKWFK4LqOoPQhEgvUEpzJkXmDs8aTMXOvVCtRvbgmllWXBSsOWYO\nqNmu\r\n=XJgJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi9IEkHf1hnRe8ltL+tSLeyu8s4JGXHj6KxWSS3+WxxAIhAIU/JqpZVO6Fdmoe1k5vxl6ZtXzKdnt7092K1Di/nF7H"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.2e269285.0_1591752944699_0.32259735307300375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.be138b01.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-ripple":"0.16.0-canary.be138b01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+5TK1uiMbc+tGxuHX6mc3sT1uwxvg1Jh9S4sKQY+M47sm53p8PZy607sOVIqU25RNsuJljnw/W0nROHJdSaTFg==","shasum":"021e2b9214c9ca9982cfcfc82da6a3adfc84c3a0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdCCRA9TVsSAnZWagAAhOAP/j1xCPr40cGjCHzgNEV1\nAprSLze2BdF/51utNY6W0NxQuoIVaEirKkILJXbPHjhc/fliJvgRBNi+V1Yv\nPW6U+FWeqU1mtWOrHnC+nafiDhvRATOkJcSXUULJSCWi7FdnE/RjDCBJ4QDb\n8MmlJpywLsJuWHFXek5OBx5BWEApgj+0RqPo/TSK/8vGAiJB3KHeHae68V8v\nfg2WQKOfIo9XGgMOpWk2RCoISQ+jqN86GYUi5PuKzaaIR4WcdEvENLmQoApw\nVd+Se4JoW4Vl3i5b7+vWUZpzMGhbqqd2Kw/9P3HjV0ahaIEklJI8nckxPVHT\nV98iQ6cT5daJPq+e8xNn/5Rln5VwWwDGE62kJGAFQ9ch8UhDWdzPcQNheNWM\nFF6OlydcYR2wM9YXgAY1fUTZw21PWAyAyH2imsR0/oCipVCxNGgrf/14S2oh\nTNi/aU5wdIELmvylrjoSsa+LZOHFtfxTJ9MMhRKZwz0Byg4HG5PqOgUcknO9\nm2ggxYSh6+RXP2ljgl18ixuJLle6eGAHjYF1J/UOopgBcOoWaf2h3Y/NM4j5\n8dPk1iYuyypkare//zB25/fHPRfJq+tII0gq7NfQenpUHwQOqeFTr45j3SDH\nBoCtgTnfUSub8Pz4CL5zSvEF9yKGNo5fPB7Kxp9u1k0EQIBRJuwVVVD/hnN3\nEEb8\r\n=FvZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcbRYmGTrAxnRliWql1Jftf8SrLEHP/D3YoguxFfsu3wIhAOCFZVqau/nb8lQ5Jw9VJloRrC3Q8XCo0isizBTCYf2Z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.be138b01.0_1591822146147_0.7177564264228464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.04bccf5a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-ripple":"0.16.0-canary.04bccf5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EUZ+tlNWLyR+9M/FTqvIUj7FNoCI1xpfWF/JB1b3ojjIJFksCTOnA550yp/mdTUAjbx8wBXC38eWuqWbjin8kA==","shasum":"9bbc50c64a92c037284b1d21f5e400660fcb90c8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Bk4CRA9TVsSAnZWagAA2U0P/3zSPeS1eXbAdCP+NN32\npvA5Ldzo0p8aHRhNRjDFFFyF0wJ0wpoW8Dl68QxyddDxI5fdH8BKwcl50hTt\nFbOFEeqfaBf/RkNW4pSt9/yk0bDRbRhRm2j5Nggs5EM4utRjTXvww8/xrZhM\n57jFGGkqtdgwFJRJd98cxdqTU7GOVypW3I89WN5IdzvEONik25vWlddIPURV\nVVR8/l4mjYSETKyh1yvKQ4f1+blV8coJhUHMul4y600NA6121ax7HZPtmqcp\nDRrO80kK2iCxPCCa9YzSSQyDpwGaOFWK7x25xb1TmDurO44yHZK38vQgJWEF\nLo9p/gBxUy7IROk3mx5NRyUD84+wnDWdJQLUwmsL6esRyOwldIiFwKwKhrgO\nXUlzsWwbSJ+QJajR9zxtQMoWWJFKJ88v1/NBJ+wcDis7p2w5rJ8oOEEaXko4\nPceEUd3B2MPDaB0lqTBIqQDSQlGfVQ4rcK7hbeKlHZLExCdpiji4RMvW+zLd\nCD5qoPgI3MO+zH4MemvZu++fVMV/4ptNQoQLk2FlQI9WgGGoYpB984/ZMnf7\nG2g5lLm0YDzOWh/6S55KzzteR75eOIHdaNeAoH2+/TtwsWhZ+DsgPQ3DyNsD\n5P6bxg1nC4GuzERgua5Mh0MosDoMVgZlOhLWfKQi9jJ9HOjQvMJWTu0cest2\nN+Nw\r\n=mCFw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaFzI0bsMB2yxriOiPyHmmnZdx8nA6qKWK4pM18J3tHwIhAKLM+wwl20qLXCvGdF7pQQ4YUWJd282ooK/7u9XFQqMp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.04bccf5a.0_1592269111660_0.09972275176783074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.b44dea36.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-ripple":"0.16.0-canary.b44dea36.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZsuU2IQxH6V48FDb2VWPs+nJ5lJaySEuFKEDS0X19mVTw1yhBIcwyunQC20QVHCVJyyrNaRBgcif5qkB0uie7g==","shasum":"9f2b5cab13380ffdb4f321678b00f2219e92100c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJICRA9TVsSAnZWagAA4T0P/34Pz/qGe0QkZqFIGqCV\nlcfomEJeAuYGNRm1i5XYE0026/701jtfqb0qggiy+Qt0BSfIrnbSvn84EWEy\nzXzqaekpZlS8/x9s7ovV3Ee9TWPhp4spNVDs4Jzsxp3uVj2S2j0BYmAWURkl\nQlMAOnDwGeglhOv4ra4FGSd9XhvDJHg/ZzKZCG1bd/QikxWpCScCBEP0CtQc\nR/Pg5svEry3y5+mf+ExAuKAvgtzLeH1+LhevRf/52JBBmYC6xFTJAF0HKzvX\n0XiCQ3RNeZhgcBhZhIhBbIvqIccyiO8bVjDtZNXQLbP0mdyuVQFrQshKA0pV\nHE11102tl9hyJnCP/jDPuAJqBVbOfPTLAjn+S8emIqr6Vg1H0PPvmbMI9PRB\nUVEQdsyeBFvQdJRojdxdqh752TICZUynzP+dP3lokYPVlhr6i2ll2z94i0Wd\nPVRMP1/JHYbsoQW8zO5Uwl+q/jXNeAECZWF+QBO8vfXvxc2e259wateGxagQ\nUy4anAcVAmhxJ7JzGzsqouZRfO72OVbimYqFEHdhqEVPbvTzJ2XXlDZgqYCs\ng3YoVHVJEcj3RqoThueMjb+BgIjRIODD4Y1N5lfhjbCB3SiRTP42XONA2xkD\n/ZijxtUnLkwpeJvOVWv6wqeJjNs8XVHYbRw5mb0vZMJafQoB7GEflEox5b73\n1EvH\r\n=1XZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFo4d7p2d3/P6usMs12EpghsW64t9vswMGkHXX9mCaRoAiEAlswfXxV/gw4DPrXFN3XaVjCJzAGNg3QKmBTm6HgtP9A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.b44dea36.0_1592341064068_0.6590697381138944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.e2577e87.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-ripple":"0.16.0-canary.e2577e87.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JlE1JBD2OlFaAGYy/+GhPN5FePbNw0EGFGescEukOenVO4/OsIACOcSkned57LDC2kmWUq692qA4Jr7itVSrEg==","shasum":"ccebdce5426113144e565c13d79cb95bf299e810","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTZCRA9TVsSAnZWagAASEAP/iNGCaBLhk4Upx4lI3/2\nxK/yVQM4u1BWpBC0AjkEHbnSN4wEltubJEtNXBY5IYPAifciZFXxo3nx4W5o\n91am/Aki2paGT7SjHVzv/YVF6OUXz8wEdGPvWGdDV7yuOPDTUUdLL6szWSDO\nQtgrvQcZbn08YX2gJ9TK9Bg4SwZkcD1W5Ey2vmosJriFm88I/3n49tgwbJ0b\nFF04SRXkCmA8k3QkN3Flu8e1D+0LLtoCmHAVKSvQtA5lXdkAGIDSJSLz2QjV\nFCRNqJpBVtVy8uITEwBKQAizXnTW8mkUviotmXB6p8H05YLHBWoQfaOlf+8V\ndJSETXZ75DJAeqIXoArDsrc3jm4gV361SRBue2L9IsH4vbOE8YuY9to/J7Td\nPxhhA+TSAJdWoG0A0z+cFoOg37DV4kzw7Hnxb2RWnhNNN2pBy7CfFaTZItRx\n5LeqlxMgHBjXlyc+4++ad/0PQ4mgtLSHL6gRlCqiDAJDuI/66HUPdkGKWxsv\nG3BIuhx/gc8fQ1Rf4vZ4lCyaGT3Z7E+QQuub7qREgbR0Vu2+9wOdtBV7YmLi\nzusjJlHOH0LMr1BpggFFQSEG0k8upTZhS8fi0pXhoFrrAdZeaUyswCZGe80Y\nsABrnn/iVEgHM+0O+7N3us4dhcGJdi/n1TIOg2n6yRt86sn6JBJMjo+8PTpq\nMDnb\r\n=vdHI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo9hneSf1B89/muak0O9rvPZhbs9HJFz1m7POIEXUqswIgDZ+Ztrnd9345JodQkqRT2DiwqSBAUkGdvG0TpRGSp/w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.e2577e87.0_1592341720875_0.9696001330099933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.58b73343.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-ripple":"0.16.0-canary.58b73343.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.3aa33998e.0","@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OQlmRGS68klMN2eQ4H4MNC65V2Bz6jbJSfd1liud2rouNR90niNpRpPsG0mDrId+tcCVV7/NCXw2DW2JKtQgvQ==","shasum":"f444cdde12d421c9a0e5c46934350b46193f3555","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TheCRA9TVsSAnZWagAAKiEP+wflH8H1I8/KfXmA8ucR\n8FQhSVNA9tveMr/3sBxHvJ4AO3+4R1VpGxtFckw8Qz+ha7tX0NaG5GWtHtec\nMWezrcbUB8ggGv7RsyXaRB1KozdUnWjL9G0Nq3LtQbEuKIC1NNijkVSGVDf0\npNuc6LOqkbadzbksC29FnjHqVzrLNZYDGzab1MvXJGcHAaWK+e6ixpwbhKSx\nmYp239ZyZGV36afG7bAAS3HpE+1gojlonPp76SbX7ywRH5gNYLUud8ZO8OrP\nVo0ysufjQ83nnY+mi2fdTXJy071VSTBJPMSvj7Q726LglxtqRYczq3J+g1xe\n1IYj6JIGaZNnhQbtRrbXyKXFlR3e9zMvZ0Rt76dio2GyIdkEHuYmo8OHicMA\nBG0T0lYjatoCIctWCxxRzor5oG8yLbqTpvWL8kKEhFoX0aYCvKWATNaPz5V+\noRwLphdpk8QjCE6isf2uJJYuOVnPuVgXmGuSZPtODMqp89zOIMiDM5jQOrXo\ngcL2DvBigxLff78X/JamUYZSRFblIlxEMpi3JrzapT7C1BAr5zGkuYS8jrNS\n/E3axcBIrNA2/xAku1L4jW+8NDuzkUeUJq2GOURR03LqvbFMbl4OoFsmoOai\n5nqkfspBn7hq1tE+3CcMZWemUUlXoZbdLJnO6RmZjGX5ckPwMeZ3dbbsS3IA\n1Prk\r\n=CSVi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDddvggfF5m4Ko03coc8YXORukaKxfVzcdZQ41t6l3IugIgRPntx4hPDrzpujbcv5koL5aFmhFI5+2G6i0IS86bPjw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.58b73343.0_1592342621672_0.5382844713970625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.f155c058.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-ripple":"0.16.0-canary.f155c058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2IOkymFGKq5D48jpMERI0ArtFvF4KP9HzXjoGDj8p0RI+B1lab6bjZftMT338/mBfRbdYtY6Wl6yjcdCW6F6pQ==","shasum":"6fa122c34ad95aaa255ebbdd2e3430c486e430d4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6614CRA9TVsSAnZWagAAHMAP/09fWJDDg4AGUlXwht20\nvs6H+ni440oPlRp3Pj3LMKBF011XbmLEUlhIj0TN/wNUN8gxCmfvXZft6nYr\nt/cij3G4tLhqyuBXHYbFPuaTDF89h87rscvjshVkKOZCC1HrS1UYNgThJpOT\nVRBQjDW3CPxNOESD0vFyzBIeV+zlEyK6vj8klauMgOvZtznpPQ16A6QwbEum\naLvSNV2v6ZdPXeqSDrAxfoWTCFvgoKzxIer03SCm7WhNdMkgWjCs4bG9k9MO\nyP8bNzVukCeDBE9TfeHwUnDVRERO7tkARdSMUiPjGqNpBIrGSdt1nNnAsiXA\njm06d0Jt7vjJV7e9OGuP1395lwYrRTyqoegObXss9zyOKNBVbSLpx6OVf5Kf\ndoTqw71eJ0dRgvQW9jSTajy02oTGpsS7Qn/ylU8EmRuYjmtJTUA4wcteHm9C\nLy8ZkaF6k6YUr+fAx79G17dh0n/bDaxq8yHQssTRK7xsN+YDyBU2ha8kAlkK\nt8xh6QWl7OujSPRg1cIGWYVg64NAYpIE3rn7R4hG1tKa+JwAsCcsjDdEyovp\n9OlgLWvBC+/q+JH993jQ7n/kNGY1LZenHvhv/9v0EkwyCPMd6j1hh8Wj3D0x\n91mbZOqLUtzNf5cb6e9sMGdCzVRCwJPJylkbkeirVn2RcEIVWTXuqd/cXNc+\nzmpn\r\n=g77N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC4c7LZkx6d+lW60re48ELl50FOwXg9ugwlfcwtjbuI5AiEA2DaMDwIgPfCTwVFDPi7Sc+n3RgpF66HqpHe/jWQu/cc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.f155c058.0_1592503671705_0.6705381892422144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.309779d2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-ripple":"0.16.0-canary.309779d2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G1261GAXG9+ReqOUaONrpaUf8A5eouGHxjHVRBgAg99+4BV57BQzlBptrxrTNI5NcZhYHS2PXSsD2rCeIP7L8w==","shasum":"0a7ead60dc139f6be817b161aa2e7e8aaa6a1bbb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+uCRA9TVsSAnZWagAA9MEP/2QnAYJI0VqB6PUkvyMk\nXH4k0TEfikcUTUmEKzlF/rpoRt21DUKms/jKIcwt6sUDTwsKWdCaCFMLVdYY\nvXD9ht2+FWtVpMO2ZR3nGaIZNH0hU39UeuaxQIlwrHwAF8sDSVSpupKPhOSh\nbY7Gu1fzakOUbm20AjxOHb8WNZIRAAudgi23GtTctYeoPvsDQ6FBuciQXBeN\nIX4lLGZusuxqnwT4HLsM5EO45BS1h2zXdhinpBjQSTikHuYhSrZV3pJL+Wiz\nKd22BfxcBIosU8Uk1+VpMAiCyguMcFg/OmgTR4TfPQkqnrcXBxWsvzcS6sDo\nvfyJHEDivtiG0OOZmwS3TYAn1XIxoWO75vcfx1YiXpyE2/xP2gSz0w+ttftd\niCBzCj3SDSjKrOD5BhhCfAgZaJR0R2sNnsu72snjwxsThvK7ZjHTSmvYQE5H\n69Ol4tUWeXK6qY2TOHLTm3xLeLasGjxbtopBNz6rINdJwhFBT6966YTpsuBA\n+Upvrpj5tFVM/jzbZcJUknDQP286acdYziUABEMhzuNNoEmdkzBlG/2RppoG\nHRKouvwyuEUYLWUkiSsmKce2VS+rou2YmRxzWntYBfCYQmSazHMzfN2dDPra\nFT4NTAvKJJu0mL3sFOkNbReL9kLh3hzzgVEPN5sc0RQmX8Wv5C3clbkvs80l\nBVGZ\r\n=1PoV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoo0k9yf+lD5MODW1xN38SEKPj3H0xOffjiZ+fkmkZ+wIhAM9Fr4D596cI70SfeWx6ZBgcLuQqb8Ectan8zXP+p8+S"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.309779d2.0_1592524718489_0.18257652974265293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.e7649968.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-ripple":"0.16.0-canary.e7649968.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aMgchKVbejlxxHAp7peixU1TQVOM2IBjbR6QwlJXPwcyysYfplcoxB7JbWPW7oqYA7Zzbpltidawj+m+ixFxNA==","shasum":"55938172d1354fe546df7ae0cc0b6ae7347cfa41","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDdCRA9TVsSAnZWagAAPRkP/1++cDQtffAJ0cPn0uJl\nd7PD95Ck4heUN6UHuItxBLFpN5j2PhN2qWxFHPMUia1RXfHuWowJrNty/qpX\n3JzLGMp+PoU+VYfeyAM3BeE4kKtHxTc7YQNHcbiCfX7KLA074lg6zhlphSVH\n63YOS5xD9NU99r2z1OEafsuqxxYYkKhjbTwhkfUYfvdDW2uaPIJUh6fIvRCq\nVGoNcmRMtg9vQMeqSLUGYOK7ZPw0pmqQEkeZy+INsYghAtB8pnuuEdupYxZX\nFFfZ4voC0U0gzKkltUA02rUGALGBzrvSdEiuV9VPmdw66ZLWz5oGO2oobAYV\nybce3DnkZPfk7a3xWWC5nfSQCgaOcHjiPSqM6AvGZvP1NYu8vDSUTi5blmiN\nRLsfbb55P4+GPGN95/g5H82ScT+XLJ3pbJg8HofW5dZgdqXfEdobaBB9N1ZG\nkSlSM1nH2IGkpXOEQObkEXlFzMy2qoGs8Td+lPzMJsypkEyer2w9mm80/XGn\nMTiBLUrdhgQ7dWjVzSpJeyUZ2Wo7VYgzF5bNpr4nec468Py50rI1oDL2doBJ\nKMZiPAnieOkoTip7PO4b4c0yhroWcA2c4CMuWlkQwjf7L+d9HSz4sF8uXXw0\nIIa85pRWi4IHqfaNeIpSPGd99VAdSctcS2CHoyJ6o55OCvTAmLMJPQRTlXCT\nTnIj\r\n=4SKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGc3Q9CEFg3T7SKP++8M4KLkq4ogykkB6EGcB78aKX6wIgb6GL5qs3l5+FMjOBrRL8BaeC8ILJWMHG9YUyXTTcJew="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.e7649968.0_1592602844984_0.5650047423507705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.8e21c78b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-ripple":"0.16.0-canary.8e21c78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GltdDH6Eaphfz1hLoz2nuSncGttsgARcl5QtUsvidSMRjUZi9sxkLr4ABrv6KEY96+QmUG1hmY06FvLvWnI3PA==","shasum":"703233fcd7e0e8e9efbb0963d40d12851a12a52c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8In3CRA9TVsSAnZWagAA/xAP/i9W0cqHjl4+e5f5vGVG\nhLGmfKAChh7CMv/Zp9mfxUREFCh8lX/VJkB5IAu0kavii6c0OsLdvjdikmTj\nkjyx5AEtQyNqEYVASqRY8MbOqF48biTJbVeFTxYb4ON9VU1DfcoVHtITOb42\ns7o7X9beVuaBX1uNc+KXiULZGc8hn8I+NJwAj72+kv/8fJuP1ocW3RE59BaY\nj9U318zK6whU5JxUEZ2OYFR8l7sq14MPclJ/GQkJPZ3uMBdWx1/vXg3CSRDn\nADDp+zBMD5kvEB9gT+44jBwvlUkC1bVJ3yW23JRdbTR6qzxJoDONJI+57KOw\nYi3nWfqmlBQxpYg2MWJELktx6ZXPlyLH5UV5Ef7zzlvK5K+eqbiRfzmiaGbp\n7wJITHT+XtoFJYQiEi94R1y+7kLY1DqsXER15Am7u5TKpv2CM7EsPOpPgq9V\nmK6bmsb/Gvu6TOLMEvTaCeaSo0CBDVjQf9Pq2F+LBWZlwN+XXtkw2D7M7Avo\nhlOvS+Fz0EiCqzyXMQSEOmxaJxyhKwJwAQ81O7pjeO7/GLBwBW5G5q/CJgY+\n2iLiiP+QsjV7q1Gz249cpu7WC1/MaqY6awd6U6615Vydkm3ryARaRLm3t0PE\nT/FGKh9mZOd2Qk4jClel2Vw/t5Pe52dtOQgyH0CxrB27PLDRmT9tnon9Rxac\n5ccy\r\n=IaKO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5GT0utCoT45EHo75Me2nbz48REb7rY4BUaIAzkKhxkAIgY3B7zAJ7baerb4s5SZThMzJWEMc6Gz8JKvzU/dp0Ijk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.8e21c78b.0_1592822262688_0.7936986379070123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.6db76faf.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-ripple":"0.16.0-canary.6db76faf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hKb/HnNgXKBlh5v7vDw7vxJGF9lRWPtUVoCk3d4pn023Gt1vrgVWVfcMuFpzkfZdpjokPT1jE00F7nJpTEJwLw==","shasum":"c8a57e49a2e444bef62982fd897a09730da664d6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7LCRA9TVsSAnZWagAAeQsP/2hgi/Q14lCKqhJ/lJz1\nCWLWKwV+U6WETNJA/UjGIXtlzQHPM8seboEj1mVVElEDPbxwwaxV/uJ1r08u\nykoBx9f616kr/sBSjmnG9z3bohYFZBUWAUoPBSfxiFPZ8bQ+eKnaqxBD3to9\nPgN0BhUjAAl5aaYRMTNHagU0DeAyuUuxhpkKbVpxj5jR2DtxSbsDJMGpAUWg\n9UGgJhXXu6isGZCtxCTW3uwoJayq4n18DtvF7IPxfEJiBvOvx9ZmSduuMJIC\nIzef8dBGrmoWD9rVsZ10oyrQsUxeyN6yOhchZeRX5uq2yYu4Rg7wsjxpBHgO\nUPsrvkpunUf4UkO+FZIv6nLUP/OkeBfSAhXAwpyReHsEbqd2pRMoLhIMwG+h\nxS8yw1vLo+FKrDV5DDIORJcmoddTFeey0+vFM6ZPAP6zMBelZZHiyb4qqK1t\nFc7pUV+7HwJe5HZZ23aaZMnsoSXce/pPMg/wE1kYEFM2HzdkfTfD/5rxyP9D\nAQGhOxou6sSrY527lYcaWhxoSukd1H8PfN6vY9DFAmsad0QG0f17YHj/xu1a\nVg0TvNtlsi7gb3iO51LDdVWz7GPXmLwCySBEy5Lxd2Hhcs/jSVLIUu9fGXUm\ndn/kexzHQoZeYmO80Yk4yT46sPO4zr7MgDjTuFFS/Qz+iTMJmSczMS1vUSdt\nKE58\r\n=8Ewu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEN+w2iGRKgut2TieXti/QjiZwnsaBLV/wUEycKM3d94AiBmDDGb5o1eghzIyl+uszqQ8cooxDTbNoPDzl47wcaaWA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.6db76faf.0_1592860362944_0.5963018954576853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.c4dd9684.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-ripple":"0.16.0-canary.c4dd9684.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+3DDA53qcnslf4j3bBaaMN4kjXPyv0ZV9i67JC92UZIzE7ZfVyeGA+NzLORFDtfLEjDBn0QSIXUhJBRtIoaV+Q==","shasum":"ccafe70a4b99853f99b38fbeed8247cb1ee33ddc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hx1CRA9TVsSAnZWagAAZ44P/jOCMe16mRr5N5pocBJj\n+0bDlP+t/UqduSlTXpl3j03oLMG++REXPCoCD1EK+IUyGjabtjSUBYuY6jQA\n06DpCmbS9Zq7G93lg9VHMg1WCAS5akZ8cn7/esOJdZEvejyPKlbakHp6FB+e\npE/phNs12Dg0WVWvH5tXLJWs1KjzXZXfJAjR6jXMdzBruJ2wY1vJrrpJ9vuT\nkXm0NynBlPWqsliwZAvndp61IS76hoby1pSh9mKTM9/+9CgQlsD82tT3Upe9\n4SoHQGVnEv0QK1rQOS/BrFmam8PcYvWwEb7pZtk0ICmUGXNdUgJAmHMtMDBz\nQsoxIWZs0rA7NEv2aHC6zYYO0dPe/s1mWgI/jB7ERw8kl8TvGOIz9VRMumOY\nr9M7Uh3ex7lymzJDqzPrSrP+H44LC8LxICQhWagwG0o6HBmqGCILmFXNzGgg\nlBIQXmMVPx6nVKbsMdmiUvLgRp81tdwSKbwEBx+4xSmKhNgtaawpf3jWWhiY\nDgyAiL60rw8h2plxTB7w5NDb6Yq4y+t+6xUEjXp2vdldxJkRmL+NkM2E9FNN\nQgFriWnM7Ht8twbWeiDdkVxv+IISvAeCajLWcMPFRN4YYWQ245QXD+K5n2Z3\nKcw8Flhu/OhxuVwzpusft5SrOXc/tR4KZpNKvjeDCQitVyk46uHij/oo5ulK\ndPSL\r\n=xafy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHOHMt8YPuuIchqlfijpHZ/D8A3p8EKGe+QVBYVKkUQAiEAqYX05oJsNhqJPIAEJmWUmU2HXl37FvwE0nSV8Fkw8Ao="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.c4dd9684.0_1592925300733_0.6659190063241982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.b3e53981.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-ripple":"0.16.0-canary.b3e53981.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.15e81fe98.0","@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-70T+qkI05zPLqwmKeMcqZcp1SnOSwY78KL8nPgG2JZr/iDWgRwEhNBctEzQUoMC2UIYGaBoh2fU5siJLctW06A==","shasum":"6e475509178e0a686363ffc2333a0229eaab5390","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCxCRA9TVsSAnZWagAA4YIP/j82KGUkmIWyOfyt/xwb\nPWV1dEYW6TNOx04Vy807xBMaXegLI8lHI6c49mOHELeA6OohV3MA/BzpIIZM\nWwIatjB2ROH6Sjdc2TeNJOg8x0puSa3BiKkgJhRRDqA9Ufsoy2oWYcoOiUhK\ndVWXf++cnHz4xn1tZc5AX5qg+d9R0N4Dji9Rm9LfS+3pnNyqMZK8n8ph5OLI\nFsffPfuF+S4IkT3PoLx6rS9Lm7eMwS2ECmjHOtgg/kSZq+chA09zXF7bWdOT\nk/Rk31R2M+AiywpBNr5Z0/BxchaYbxGxrzZ+cQPHFo0IjjKBR9cj0dE2M9QX\nRjp9EkGFlWR8BDY/b2DhxdDExm5jQjuk6628VlSMKJJ3GxbbZppgNgIXPVbe\n7kYrn7Xt7C4iyt99XQKyLabCYVdUh5GC8TxI9uABy3tZHkVyRT9jrX8lSuc+\n4H65arc4rlEAM+NN48unyjV2PgZSNuBXwXJvSiiO2gS2sJiJvY1GMhuJM80u\niyxh9qnCMOMXJw9EtXkQiYpBC3cgjZTNPK+qjfRrwm9ZrQ3JVa+opRZCkJOb\nZNoSg+9ShZKt4WntJ4hc85w4SaquVf2eufxCBZyhrWV8HyWe4y2JkFP82znL\nH8UidIRgRKwf8nLAQ9TTsfS9JblXURt29PXZL67ZyxmGTggdOSEXDVFM8PgA\n5qLq\r\n=NvF0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk49jEgPR3t+fyGGguKOq3fRiV8iIVxtBLC/sef780HAIhANkJqYIBKcg8MXpZrlH3xnRSPsLRbyuESo06QEHnNYpB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.b3e53981.0_1592959152955_0.9076566654127247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.b9468f77.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-ripple":"0.16.0-canary.b9468f77.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZW7t/zIjA/7xuYaS/PgF/9A7mpar8yf4iRqaykm9bzhy7XSTWXgyykr1kuECayyd+KUp+Xsga7QgM73eQMmBew==","shasum":"67bb1633f95548434403585bdbed9de5f0483ea1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uOCRA9TVsSAnZWagAAPnsP/itRvEtsAycp0AvYH0T3\nT7VaS0Q7ttbbb84DP8iaD/VnBt64EnIohqAyXvbZjfZC7JCK6micP9XpLpl7\nNuMKkHtPiiJHe+3Fyf7BYC0v5rXlq7ADnIIS4FjcJJdbhSA3CjqAHp9KdxuC\nedht94GIKmzG92AMfs1p2s8KUkXXqb3NaHSWw9+HVph1xa4NQbzykGMbcDgD\njIBbvl6/sa0dNHQyqLLiqxjCAf5qbOqi5mtA2opaMH4GtGlr5iyYKfNw4aTM\n0wSS5IANNl7oas20sUrifTKoynQ1sPpZtCr+oUX41+rJ9KJu/g099lRtrt0A\nF5h0SP2GmAW9uVkotlvK5BTIv72dseV//AgDLk87noxJwmm1YOKiWyEvdbN/\nOces6pjUcF0Lul2HQdYsUK72tOH/65paS6dDbJKgwqBChteknLV9T3MWdMK+\n4yqCNrnKZzL6X3tMFQolzYAGR85JJQKEB9t4d2NR38eDH3u2kQmRxh999MYD\nk9IKj2zGVpIu39eXCNKYYLtBtEOD6HTCnZStAuECtFocHbqgVIyqETwK0w53\niVsfcNiTUXlqq9wdeIV00NNN2OWAOYZIZb6c/iyFtJo9aZKJU8R7Oh5mgu2A\nb8nT2SBZWMe9rQeVSlkJkWp4+gkETyXJD7ozPIk+71CP0SvbVz+EBXDUYgqN\nc34T\r\n=pS+y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQwXTqxvXAhK0nehNxRNu5d+vVRzheER3aASs8w5uHFAiEAxOOdfhqlfiLzruZvnYaqDaVyn7/BnLaqqYpmECPnfFQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.b9468f77.0_1593035662127_0.6523011915192323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.eb790e49.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-ripple":"0.16.0-canary.eb790e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zQCDIywLa+8Fqiy7MNqZIHG9laV8gr+f53Lrg73ME3TFT3xGb5Ip2Yh3OMhNSXI37fplbNbBv8t21u0bjeYmZg==","shasum":"a2bb97a7be1e0c3eb3d8932f1ecb2243960cc75b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTBCRA9TVsSAnZWagAATPcP/0Lxx8QWQ45geRIC0rvK\njFmcnRn88BzhumJeavoKQAKp0j6JAG+O74YIMYHmxALmrYvy2lY+jvVNeJgJ\nYd9QJmaoQSskf12KArg9qqG4PL4/Fka/g1Pf9CF9siEKOGaWIbdkDo+Fu5pq\nhC2NygawSVpYQjE3PDwXSZVpqIYLEIfxU+3G+9PXrSHKKv/lDLgbo3K4BR1W\nhIC9zr5CBozJC+7ppFbU7qrwuOz2K5IUgu+f3wkyA1Tp5ld1HX4JO9d93AP/\nktzw0H8pKbyzjlw56Mdox0yNFdcTSGeu3S9ma3AOxezml6K9nfT27rzvL+A+\nS/HVImQZ0YDY0IUNMozGdxbiX9G+Z56c2X4eOvsX4tPZHpHwNIzscLRMUqC1\nYFqe3ZTf/1meBlAma8u0jOkhzCnLLSMtR9pY5uqZOKD0uIRQk5GEPXZBI/sF\nZYrARvFmOGTV6kpyvk8YfvhfjHlYZyR95bn42J7M2iF/TdrNYTG0zH/bSa+d\nZFeD4sp6bcmWVXqGbX5dYH45GO6RRpBTZc8ofO9XRjoqId3jsnRa5KZgTmag\nE9MCkRHjydlAHMxYYWG3fJqjaCdcy3c2iTkXCAP0aC+lu6HNUsXw/rxaly4j\nY16zVf79qZeLRoAqN2dcewB/hO/8NTG9Dy5WHqWrBBYgFhu8KgnRHcVnWwUg\nJo7g\r\n=s0Bo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJAdODuKTANsNbXkkpGCW2FPTGXTGhhVeNew1ZCqBGpgIgG7i9icsiSB/QsSJyWXuefvAnLnBCY3YO53u9xEx7lyA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.eb790e49.0_1593119937523_0.20147699746870718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-ripple":"0.16.0-canary.9aa1a5c5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZuQb7QamYHwq/UnslDFIirjimDhLjCYo+sNMi0Ql+c0Fkukx/LIJmUeXvklY17XrMOokZ3/h2KQHkII2CJGB9A==","shasum":"7d949b9dfba96f69bda198db609d0b9ce50e2062","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irMCRA9TVsSAnZWagAA0D8P/26DPcMaGSQj0/sXPKAD\nxN7P/raniSJsicjVprGEZRQKsiUqN0wnIzWmK3woXjcKNcQbaSG8h65GrHQe\nNXajTWWUWwsYLE0eOrQ3Lmyfcr8gLo6M+Dmrmh4OeF9aCOGlu8eu/BdrF/Lp\nkbeEJz49trcxEq/2B/dKVEec0tqfiK9OgsvkoHsw4YFxywIaMIOzjGpe6DSE\nQoEcRCY9rbRcndXkaw5xf3yjTGOalnJkpTXpS6AzJURXDjk4r+FNCccVKqqH\nXLGCZvYSD1hW4bvBXX6z9wekMw5r6NASLwprWc1vXh6keEYCHDrWkZzs9ai+\n8XyuP/cKGaby4Mi4r/EnN2NHZj/N2XigfibdivvksaAmVwhEhVtsrXBcMdqf\na1KGrP2AqYHSaY38GQ3nP+mSY+mBQUT6PD6YI6JzVXqgt9Jn6sq5Qj37ju4X\nSHyorpuvRvaH4E0WjZc45ljEvzhwjBEY1t33lIcAIqwBrvf777FkOWwBrQjy\n2umNgP6c9gFrQVwrORPqlgBCxO0t4IH/k6RNsgg4H0q4C7fn2+VyJlf/Jjov\n6Csdr76lxx5/S6cF091QHT20LiD1TgfPdkB9WZcaFR9p+c6g3Y2qOyuz3bMC\n/kiHTqumUKjMuxCUW1RE03rRiZzEze197wK8sbtALwm1bVGUxPPf0hlzIhz5\nBxnc\r\n=Yne3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfFYenDXfz5TO1t4Q40Q7k1bcL2iO2fyBCQJAwqFgH9AiBmOh5SiE5f1jUhVnIYnF9O3w9OgxfMUTdJITCsLg8e0Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.9aa1a5c5.0_1593191115652_0.4087741378504053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.d36e9861.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-ripple":"0.16.0-canary.d36e9861.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6Xk9VmE2zEZk7mxj86NzllCaZB9lLbY1m94h2PPqrWcMAT0ZYTeWFXT5aOqJZJGlwVkiXSeZIUbRs9oC3M75Pg==","shasum":"d6647dd2c993212e1cb51b20ff31c0a101a0a23a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIUCRA9TVsSAnZWagAAJdoP/jyo0PR9/GDl3Qlb0ky+\nZZ6VKwwLl+d/xKaIu54fGFHcAmNIWesWqmHYjWCtytDeJpUpVEdNAAzydPhn\nmQj89e6WE2sBwmVdbS5PZcbE/R0yu/mfvbd+EAnygnRY6A1iypF6j45QHP4N\nds61jHN7rk2VmKkBYJy1o00yCWmafhKDSeCjpn7TwhYmBpemp3nFvYfzFtRj\nbcMR571tGmjGIewmps3Jjt6jMFVL+iw9L3TCPnLnSmrF0rPSx/+Dmw4Oe+SC\nOA9OjgPO3hMrvLSSLH0R2jtGKn+v1BkfroG2QQ4Lc8VImAVG1yU/u00AXsPF\n2lSkBiYAk1XpAGX1rAA+MxxMnm/xQYEdzkHNsf3bjs3qkuuuNpgNk9jHbaMX\n1NTBaK7WuIjXb+1R11w2UNzx84RezWZwbELMpwZnwXYgyKpV9peicB1ejIHK\na+ruWLftWF4pg1RI/5J9Mb1eK9NrWDVyQqBNmanBLjkGHt4XTq0XyqxrwJpC\n6nx4tU3lcFMyCv8LqI0WR/y98BCbeyYWwGJBYYyVhch9Ao4J1XQD3bnEJJQo\nPvEVaRp7sGDZHxpILmbA0/2xf5nR3EqMNPWG/UK07mk331akcvfOSIZPMInA\n6HgXbN8Tfm29hF2Fr3/oAF17gsy4Zr7ncVSio5Z4cZUqa1QGgVnsQgPyxRqf\nm0p+\r\n=ZNnu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQQvTO/6TN+8jSst6z8eqRWbRJtDGMGt0DJhCbb1slcAiEAojUjOACA0OT0vnXFxmhmtyC4MKl/jr0ei+DnWxXLr9o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.d36e9861.0_1593192980223_0.1126529759618069"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.155c2f85.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-ripple":"0.16.0-canary.155c2f85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/dbJUJoJwvjBkkAppoGMczRS41RmC4JMiadkBJDm+5S0bObmi+eMohdXzDaIXJ+zYYoCnQETVcmLBYy2o6XWYw==","shasum":"46df103bfecaf2ef824998b6f769f710b0e79cc4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":102948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oToCRA9TVsSAnZWagAAMmwQAIGT76mNnb8jQBRoalzW\nbcvveUxU6EqMnvx/MZHp6ard44m+iEfjR7rn9NVIzLm8HF/L0JA0mrkH+p1+\nSA393YHLwJG/tj4x2OTFJqW9i4QAgDkObbVJyOXHa1fV+FoBdDuSz6tiQ8Mn\ndCbWJlZiUgDu9K0kJCV1lQgi3HF+1ZSILNA81PL/hcts3gPyM2G7p+c3qS1g\nJEs2EphzGCXF+LJKNBfiMHf785fQSB6toZD82LWK+b+xjh00oqsHmn+4rFsc\n5Mw7zAOJxjn/z3Gmttx6yIqeGcdKgudft1Me1sSRyrCgSiSmfBw8Xshg2DrF\naJQBeuVwI8x1D8GnrNtHSz8N1UT7/7QXLV0WaSGo38Ojk8hg3V+0wv3qrnpy\nRCoG1CbIHxFwZS0NCyeOJYZx5w42xhLE6NCa4KJ2gpELg+czaX/GTGwJmvJK\n3xXs3h1QvMb/7GhvLNYkcthVczS0r5Uoaa393HM/258r2mwHz0MhClfw3u0W\nEK6M7rTa9v9iJwNS3kriVFf5OWvl5XD7+yapf6KVMpvFb0h+1t5qmiYozGyU\nwfcibpflRDZXZCkbQVDfCbZKVWWKt8uYgF9wBnJnAIgngJha3EoVAisaHykz\noYtfek9tscLG7a4sBHq7wdOxSiSI/ExW1F/XESj44th5FqmFzWbW30MqJ+d+\n8foQ\r\n=RBaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7uaesBmFwgwT3SV3hUz/D7aQ5LvNj4lHQjj2S5ZF5uAiEA7ir7aTUCJvyvFPW1HAlp8eas3ViL5EypNIrtA9Z1SVM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.155c2f85.0_1593214183955_0.061411494736218986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.340c9c40.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-ripple":"0.16.0-canary.340c9c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9lz9xsR5VXyPYtb67Y3g2vMqe5yadB85u59oBrPiBOhwOV0Q3uSEIFieMlBAKac+34w72F30gCdUKtkUS907ig==","shasum":"e5ae693934fdf6bb0154108c201353d49654f81d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oboCRA9TVsSAnZWagAAipYP/1BpU/tTvJQff+GBjIW/\nFLNt1ZiBifHrMH+8WhFouTn5r+aXqtQQDXHGfiaf/x0BiaCzEaVqYHli82Z4\n4wMBbMXk+pz4O5wwYJcoirOnuDiSBvXU60hc9YeCarFmBJCiFiPDFZhvqHdT\nvyk/uZSmHHVGz/WukUaVcHJADsJq3iCwQFBhIQiimavXVvuZP3RkPHOr4pHk\nlWZq9/IVzN4GbDUW9kN58jLu5X9nV5BJjAeswZdDeaU6wmGKjOGIEpJQXE26\nxkfI0VP0l7NmOktEA9xfl8RFhr49YlKoPK4zAUs6s0CzClX0FqxbzDPtQkaG\nWfdRf12kw6HH4YMC6ORM0i4emjL/5dvmytoGcuezmdJvi+W3NWkxKoulP9wh\nen9rZcan+DAxJavy0vUDgPytCMebe6MoIMoLjGSPJ+bVlRatxBO8bm0pPhUk\nPpaEXGbVtwjD0CDHiiI+2wLduxHLbVAyofJrRkC7luK2eyx3aLDOl/UR8g/x\nTBwqu9wRkKwJkV7arA38UR+LGOmgPsphhAOAr5e4jmI4pAjVnSanOC3l+5ji\nPa5SRFgWx2nXMdZOdMonH8X29zL3p5EJbkWa2gr3o8qidsJdxrkhXzO0thaa\nUxHyLbLYtXf4Kebtl8biu3gmf7kJmuOpVAD6MWgy0RqRCyL0aWZodBfLV+n4\nOPbm\r\n=AkGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEr3IPSy56u/36VEVROFZdLg3q8GF5A24nHE7NiyFbVjAiEAitQDD48ci5uDUwTMm4uoqF/07B9gcIlklvPv9Oia4d8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.340c9c40.0_1593214696512_0.07042755687019997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-checkbox","version":"0.16.0-canary.a3384d2d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-ripple":"0.16.0-canary.a3384d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xHuptq+9yvHVo6cYLb16n9XUl3y+dEgz1tcmHduJV8EfRfxdWRpZdTWS2V80yKiXXtSj3o7KWAGFUxtPBL5DEg==","shasum":"7dd69b8a83ad4386980a3ca293f24e071ea72fe3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6foCRA9TVsSAnZWagAAfjYP/3yvp9NUuKfGS6RHBrsS\nL/UdVBhl9v7Suz5LjeOnWl22SMJNkiH1eI/ZFyZOxwfD9rnxW8AB2W1OC3xa\ndeWqjCOXpYYuPYKSKV8J0TbF1XOW7Irj1fTBdEWRETASFW8juv7AMFLn0DUp\nuepC1tvBHRtEGe7whpWZU1dtkPAXSA9LwKze2XwkjWS7lXGUK6QFMiw8hly2\nMwHQJmY67/xtTqQB0kXqdHoq5px+ylfp7yRkNwhRsSV6l8lSklxlN0CDdHcB\nEFmpS4ljthlSUmnxAoEWBJ1MoPtSGBu70Y4cDelz44nul3drDiCw0J1l3fuT\nfdO9JehJh8prP32QvACt2h8ndnqFsUFw+T53+vnJWKxSvO3wWJv1HF1XOhgt\nLL3N0mgAsDsOrJbo2TO9AjPfC3BVZKO5TWN+98X6594vY/vRP5SKAlmE3COe\ngFTicq+ll1oKmlPNVA7kn0JQbXxq/DFlImjNEmlYratMprv+W2wBSwOlBnow\nTqQJfGWKJNuUMAnN9s/easzaA9XQ/CVyVIWJlLsEkG3baMRdzOufK5HKNaFV\nFV4iF8sDczsp1rSk7Xfo6aHSWYvGvMdCe2NiGCwNz8xy6rpmedTl9Lgi4xah\nH7NmvWsMN9xyPnMeUY+3BHB0/L1bfqYoK+lN0eFjv+2/kcAdpxSnUp255FyD\nY8ta\r\n=3dC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTtZW++PP+Yo9sD7hUMFzQE7O1J5cecmbBineTNAKBxAiEAl9a9y4h4olVHvgtBCcb4tOccsR7XgDjeOGCGJio91oY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.0-canary.a3384d2d.0_1593550824436_0.9332817426695732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-checkbox","version":"0.17.0-canary.6d056c96.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-ripple":"0.17.0-canary.6d056c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0fTwrFyELxtGhde3/66sRIf0XIdIkTIp+fbQAc6JCv5Y1pyLmbmcUB7jAd18Y1Yh6Mqkoy9vDOX+pjjoLEJoVA==","shasum":"8c3ef79e39ac223fc9f15716981b681080a8393f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oeCRA9TVsSAnZWagAAtdAP/i8RvlJBkzInI1c/rZva\nmrZSLJL7via100U6WD0gjb8SFCTuZK9tEl0T7iiyWSYNUaaB/S8bILgggpht\n6rv7Q1l8FYi/eJ0fAWUvh38ulw9cwkEyx2rb0R+lsvLZm52KkZFvHXjE8GsN\nfje9xvymEFmvh3VZ3oC20tKtsQ5vPuwHHU6lPjGxjIWfYWxhVbmjXVIEF5bU\ngkfKgbnXDgVpfN7dXLctlnl448uJzwoqo83fly/C3ZEuqVlDg4WDxCkkxC7Z\nS1VBPpjPtpCS3sfQI4+BNqst0Q0dNd0N4O+UNwyo2CqmS5nkD3UWoEcBALLZ\nGl4f3shOWkdtRfP2s1pY/COfVHYbDyj+kHJh3Hn282ycixuic9masCOyQXFS\nbbdixaUfKDNGDh9OChlaowmLQgAlDfteRdRK3Rt7I++Q3n1mYmwWxfXQcNmn\niteEVSPHzrDcTSAlqPc4j/rixbpsk8P0NJxwgU2JNWAAD1A4eoohoKIx2mZa\ntxv4ri9dCcXVhi8jcuWVhaHa0eT85gPFqOPIsnxv9WVUdDQOMhwb743cQrb6\ncskWDZ9WKtPHKbVaUFudPpABH4ZuiBT2HAji+rl+7UVBdN09PVdS3iYhR4o+\nKWQ+CWWIoBeu5nLLt3o61VKwsCGYU9pFlwgXEq1LThgcoaXi9E5L92dcZFSg\nrStP\r\n=+hsw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5vobg2EugOtm7/62efxy64soR9Pw69p5u+xPnY94FqAiEAn2GA7fVib8j++wsoLfctRlgm38xykVZ8EN/VjFOCbGY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.17.0-canary.6d056c96.0_1593551389965_0.5484114347786873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-checkbox","version":"0.16.1","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/mwc-ripple":"^0.16.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-ExYQfPuqA/70eskUIy0ajyJxKsJKlInMHyghD3oZAWopkn5VmswNhmpzpcCdV+Mkl+YkqfMrBCn48tb+fYT0TQ==","shasum":"f679ad7b2502e255e3304e53b3f1fd232f8d7cd1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.16.1.tgz","fileCount":16,"unpackedSize":105004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tHCRA9TVsSAnZWagAAGU8P/04lcgKsdsaZFo2emHO3\nyxCtIbi8upuO6x4m/9q5c6y739Sv1JDAxbr9WFiDCjtXzN3DrexqKIMWxndR\nz77IjnzcO/0Q0JT1BjlaNk29VQ/Af7Pzwien70Wci0KTyOdUop6UsjF/07Nu\nlW7jLM7QDiwvkaHCiQjClb5yHeJQp8DjrM+SJ9FCB9z80TldxfyZlSXKHTT/\nZ5Yg+nz8d7aH/g80eGvx3AVOUCZRZuEB9XGEu3O11CNRSsMZ86woDEhmAlYT\nYHBsDkLHOC+A8T7frNxBoqWFetpgJn0uHfedqnwTLQzf2H3N/mhq1cXjcQqK\nMcVvCfKxBhfzR4DSWjakxr96RiXnDcMHbseRK65/j+eVnFDPTzkUE7O42KDx\nEiF2GyTGhxrqayER6dEJlsZ/0yscr4K+vgJHcHgD4JIcU1T2T7iMYqwVo17j\nqZqYmoqHQGV/ngdOC1Wx33K3uyBM/M/+PPM7fvp1bGXTQbDy5h9/mKeJyvgf\nbLGhV/9N6Q3850dG0kBv1QBRSYFQoECnBx13oAGAYYpOt1B1BPcLEEcG1ZcA\nTpJTK9c61X2Kd/c/qLZM4jGOIy3tLWyYAdgRNZ43NMjSOT1trkF91mPRBmLk\nsgPfi0or1XKUeu0HOavUs/smB0/LV3mKEUi3+l/SfBW1ez64txWiAfLRXmhC\nUWo1\r\n=ptv2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5RLI4pHuR9GhmscV16ZT8Y2q1Au1ojxLpDAgXI0dl4QIgLae43akvH2KXengRdmWs+DkOiM6Uow9YxA6c5ez595w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.16.1_1593551687261_0.7333166193605325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-checkbox","version":"0.17.0-canary.f7e37607.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-ripple":"0.17.0-canary.f7e37607.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uEgsxRsXzrFd7bUMOiTotbnJj1LTpicEtaWMQykpOhOg9p2V5sNPU/yBlZIcOzVB4JqrcnC24v82x/Trc5bAQQ==","shasum":"7351de9b59cdee1c16c2145bf27acc9272e8fe5d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IpCRA9TVsSAnZWagAA/KkP/0v92RTXJPmL7G5mSbGY\nZR2D/FSh5tIeyvXFmTJqJorIqwXPYSt0iefgdS6ovpN0B8AN9OEyx1DZbfb5\nJJT/GAXRe8HQGDmobpapGuB0sdjgnVkiKco9Q1ERPdNLziO0SFlwdM2FoMSN\n9BvGSS0FYDOX/UHrR+gHVvquXevg140PtbVJSYc0gJgzOOIhDCupmo8whQYo\nSSzoXrJ5obnz04w4C/8H/38BHDCacuCh0w9VJ43vPyVS57v5D22Yf7/pzgtX\nFl5+ljkNY0qM4sIXMr/Guzd9WTkMXG9HsgChMQsDiVvXqm8vPRn3ELdNKKNB\nIuJzSKU1t0ahcq+dR1lzo7K/YzgQF1WTpc51uhsqMgB5Li70h1qBU3YBhiHC\npLwPfwmORfP1Ic6MUWWoZWWe1JmZYwbfaOJ1lvMAFQcb7QpLPJYR2DCcoyba\nQNK3VBR4Wk+MISHT6zlb5AzRgxhr9/rs6G3HcpbLj9enAdEwAme+CyzplE1u\nmbjaIPgsTVLYUC+t+KNix5WIVV+LRXYaWbgxLp56wQlXffLudew/XE+D7khJ\nV/pJfIhVW+dNEN4h4uuTOBf6++u7tEVZ1yz1f+VoBfZa0YfKuTXRXrOCeu7b\na+ncckZUad+1DfBBFoYqOu4kteOT/9uNLc467nmGlLZUtHnzjNWPSMGCeRvd\nI2Co\r\n=/1ru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD72tMMiHOPMObQJu6w1gVw5TIWqy92PmYXFnVuet9mIwIgQCbSgvUq/s1DH4D6XN/0E38lI59PrqN+gbC0kzaGBRo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.17.0-canary.f7e37607.0_1593553449309_0.8619156148700007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-checkbox","version":"0.17.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/mwc-ripple":"^0.17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-63L9OgbyUc7lGBfXI2FkfxJd0nfozxIKk+AuKfMjon/cY18yF+51+GOVOsYurAWs2D/tjnwac4EgeZGKtekfvg==","shasum":"f05ac0266103c974416b77813f9dfab8dc555cb6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.17.0.tgz","fileCount":16,"unpackedSize":105004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeQCRA9TVsSAnZWagAAUrIP/jNLLJ9A7Qvm2SzCeItn\nh+u1C/TD9vhv0qJBPR+uQdjXMRWU+rCwr2PbZuSuwUsW+TKxsLDKUrrYa/qn\nqv3aapPYZU9djv40Bcc0VZmZxD/UGvJZgryd0fNB2ICpVhiAUaU+0IkKgcne\nBCpZ3wZ+08aDtMmLvdzQ+N4fbd9zubqWL3D4OPI6FpkesaXCfAaUE7G0sN1Z\nvgC3ZvOfiVrRF6ei0idwW7shkipDV9+5ACraFp5ui/mFLBeRITDCmuu8Xcmr\nrWMi+iRuMPRiPfALmi3M396P4cMlIcrTSWUKou+ilKDPOVQ/T8S1eDl8iJ0s\n7zKWm5XQ7Kto/1DNnh+FHw+zL4m3cNP5BDPgGYJMCr2THo7uQ09E94VIXWVx\nR3YMkQSWpgTHem25SQmDo4LWTTzrt3EUUUiHD8RMpTh4zPFlAnDU8AWy5R9/\n8HQVzCbfs1A4hlzvl8lQJFK76LqA8GSBipi+G+ry0Ohe1Jmz6xi9xPdrDSqm\nZJl8fqVRBTcOuayr+M0+nXk5uWjFhkQBU2ChXAQV9Zot8criPVjTL5sG7eRi\n9RJtOvdd3AHonFxewkYlaX7Hn5hW6M+av/aVxDBXUXojItqngJ/VKODIqZ8h\nQT1eJ0PywNrX/6WvSZkmO+t24E5iDisPTXs9dzCVwNc/UpIbce9zX0N51aBQ\nIqif\r\n=ZKeP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCanPkpwZQCp9pTwGCmr8xgBMdhUkzEQuRTanYuoYGaQIgTT17WEA4QqKKYQCEgYB879k+BzaOR1qGPd1HxnSALJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.17.0_1593632656480_0.07742041285145196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.0afbfef2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-ripple":"0.18.0-canary.0afbfef2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IGi/sP5BI+pOlZIGhJ+W5wiB8/OpkYFbpB7tjofSXT4GfEKJIAur0B3DhB45yF/M2ruabsu7Quw0BpAcsACH9w==","shasum":"0b1337bf2c3f9d5048cf8182cc3c75b397e71536","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeYCRA9TVsSAnZWagAA6NcP/3uhpUSKIs1e+k5P8UY0\nDdpV+q/STOZDP9K/wQjQbJsMNV+BoS3JK3F9TqRafXDlhkcZtdDs44s1fH6U\nFioqSyUlZE8Hy4qW0ZM0aEEnYhkIUcjSSzyX2f2KUumMwENTMLFagiEPxOa/\naGdfI9++iSbMWkwpbF/db5Oz7q0bZpU8tAubIdE9YjtR5uxxT5gYMmQiOIFW\nKdhsgrRX68DF4h/kYf0IBe/9Ww14FD9A0tYfVyARar1WmP5WFtwu6Qi8gJd1\nUFxjRrmowD7tKzxouCAdAbp4hStuygCxSKCwMH1t37oaSCBoYbLqNEIUXWtD\nsJa6Py2WxC9nV6kOAMNODy2yNDUzV8HwRqhedPux6Q5WZbJBWQNwTvkoXY4C\nuMyU10lR5zl/I4FBL/umUDh2DjDxuYrGaK+T/uRkYI2v3Abz2s9eNnliB773\nnNqT9KjEGMza5EZ1IWDgFTSXH1W2QAirsAomeV/iaIx6mQ/BSWaSn1ObL577\ncJRRhqhppqErewv4mzv81RUQ2MD44Hs2aDrDbs7BQ2oqk6xRzif83D4WLASc\nKp+H/T2qlGRUqp0/Kw5O19zx7+Fin7dmaJ2F/8xS2vHnD5NwnrFGJQj4EDnU\nDzG6Pt+BMRfkL7I4x8QRxnYsFnn/Klqj+eHGbN6MyndJRpj8yfLkWGuALegG\nfY8U\r\n=wQ+T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgu6t0ORT3xVNWeTJvlw+YM5GalxjTVlHA988SlCI+/AIgaS1KteFUbH4UzERbWfatlN+gxlVA3pKo0aEe9k4D0II="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.0afbfef2.0_1593632663851_0.6811265155821327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.fd970958.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-ripple":"0.18.0-canary.fd970958.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ci3IrSuSzmMrgkIewzGwEHH0j4/kzl45oOSF8KTHLpm3Vn4z+7u+MyDgTrlX+IAvMUSAefzhrtD/n+K8YGT88Q==","shasum":"7b77092c5f947589f27d29e88c3d4cb5439d8577","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1ICRA9TVsSAnZWagAAZE0P/3McHY+p0B0TnPv67+3m\nqIkXwtmWNYJ0IMqToKUEwFZwTAl0F1MMhHqRZ/VaB3NXU7CG9LfZNPviWpiT\njUk3JtnLmiGWWj+0hIwOYvUP4QeiVq5OWy6i0VQJM+oS9JY7hdWqq3vqm9uI\n8imk78YlNz1fdKhvuKS6zfT1XDqJAEb2i7N9Mj/9/FLWzs8zKHkUYImLJ+/d\na8cXczUugYv13OtsfBQcdKYQw2rnD2xXjlaOWWRkYvUxAMpaSgfHLrvfzzvr\nFlOemQzdKB4WXSMXa5IJGG8i7bCxCDUJwSf+4fnkRPvGWjDf6HS3iXs2PDYx\nJnVInbfELZWOaPBl3nOpBliX+PH5dWKFreRsVP+mipIQZ3YY5qKXPE7z9K9L\nUkFZqhKgVM6AG5iaq/Py/eGEU2ATAUAJdLf2+qwRjQUcwGsEkR2EtXt7w2YQ\naAMORmXPH92LPugs4tlIxBFHLwqpV6jP1UtOHP8sgXFtJss1XbVYEaoGVe8H\n+L8/G5VPFTJBaTcutz3PGQLqiRp9tCaNSV5ZXv7qhHuYrvF2ptHQOZbgMCpE\nHwNJp3XPKDE6ey++lEVaabcVY2puPbF2+PY/14VMUO4dFqoNqIB6BgwsVrkl\nG7LmZ7YywQ9DschrJXjz+b4loZ18xiONcsUfXRWie0gdK9+XY40LjcCOFC2z\nuETX\r\n=QYOp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2ADjQWOF/P2zpvd3SO8Q8vJwP+jAEAkKN7HeieX1tkgIhALOEGwsVh7eOH8yiDX9s8VvusgJn7KK8AX0olvleuN4+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.fd970958.0_1593646408401_0.48223074028628377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.fd44be19.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-ripple":"0.18.0-canary.fd44be19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FFwXktuMhfUz9o9ZW80slpdtfOPUDOULlrrxUPTUY7qbrED9gHs94t2+CIj99JC0BsFhS8NhALSRCfgNGbO1Zw==","shasum":"dad4dfb6456c3be729a3b4f45170fccad794a8e7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUzCRA9TVsSAnZWagAACbYP/RcYY/93bbBDHyG7HEvQ\nszGiYI5cckO5etWZhDIqiyJNT7VPSvbMajoyKhdImEmOZ3p1+CO2PgOMlRCD\nRqSPQ3MXeQonyyj8g+xLlm0xKp5lIy1fify9pVTZP4nOPFHXsMF3VNxXuw1D\nuejHWfSai9B21JukZoXAQYn5YUB+bRFKj12+YHFKoCcp3T2kW3cGj1U3ziYI\n8LwkdFaLleW6gTXQIxs6EXFTBOFoU5KHeEF0SOXhZEd5spETrljxEa8aqTi0\nXaVEKijj5u3FYPfYm/fceRKWa95b+0qxgR2iOyluo1IxSJ56AM18CHTYx/M0\nO5Yr5YUZmV0UujJHOpDfQAOnubhsBh4MXzi3ZOeK9kbdwbxqrnnfL382t5yw\nzM5/upGcJz3GQUoombaZdO6GNUgr5clwQhWC4P0ncwyOwBIx0duG4xAKLC1B\n4lC1pGdFipoVe0VsJmIr/VcMi/vmESAeStb08yMJXLjW5qg8bt4rU/jiisWK\nVK8mU6bIbTurJstsF4UlHL70pH485MUIv4bHvHL3j0aa+GPZIsjTe/XJikRQ\ngrKL1Gq2tERsJxLpwechn/rS3qslBQ1LStgghgzv4vm0rtIH5OXiCqAQPs9S\nAHt0ku2BxEmVhzoursA5mSx46aJH1867BkvvM4zOKYZ1bOmO+b0j7oA6G1jb\nzm28\r\n=PAR+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRd6dnkshMgEXz5eniMciense1XNsYxmbgS5oGFa62GAiBYqMaxq2sMrUt2eYO/qxxvCKAebZk0nprrA2VoB8LThQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.fd44be19.0_1593668915296_0.3299658026744008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-checkbox","version":"0.17.2","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/mwc-ripple":"^0.17.2","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-y+9VJ2dvcQloShRv/wYJDUjp6H0rWGu7MbhqvxlKeDOcCBz9a/3eGZQj7MnWwz2vkRPfIBwVRsJRO5HxIwZvuQ==","shasum":"e4185cd88857fbe25946a27edfa46cd950062bd9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.17.2.tgz","fileCount":16,"unpackedSize":105004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeBCRA9TVsSAnZWagAAHboP/3nSHMaAhSWTtktzrguU\nP1oMopOXt4l7guZeATqzAZg4zC7DRhiUSJFqGak5vwLHhBeae7ho34/CV5t+\nsC9COhhO0Ma4bGyrRM8LjHO/6S+0tFJAUeYlEXElC72/hQ5tzMyLyTaO0jDS\nnveW3+Ka1tf5OyASGtzx+IyH/WngOFCjXNdVI4BN6pmS/Z2bNZzhUZ8TbTFW\n6BuT1+pNQEkse0CKlOBJ0grK6kHHxnS6n01g7BK1uN3hQdpwfWcf+krR5QsO\n0tViAQIuE2rTvmS+XyWtwwOtf0TDRL/kX9AtCmjx0ft1bpTdRgMIaPfeVWHG\nTXMRG4RXfE1aUsxv5ymfIEQJLbC8v5XiQBDrU2xAIveqFfM2x3Yy+Hozb8gk\nN1Q2dcD29Cs5krMjVowFaZIT1x5Kki9hEJOHUlTfxHwC2udISVTPVSJUcKjP\nbN8jIpRFfj/5UX1pYYzTgOVhsf2EWjdqv/tTG6RPt69DXn0x6RaLcvatDsPb\nUwPM+2Eyz9QAXC6Rgv/wc32DLXm3vUtJ40nhn3gp/UP2yYoV/ty/MVUWnBpL\njzKJDHD/MNDTKCFR2CwLtwRo0nbZWTK0xVQw6lu3yuU1MoZNzqfZ+gxyhVrD\nKJZ8Nf0RBS2D/V8p/mL0IvqBwcH9TG/RsgZqYCDBm+7Hu6EpPQEGQ/fq0zpi\nyR9y\r\n=WnWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjyTDIXYhLNC3ehpPK68gb0XH++v0fr18P6h3HErcxSAiEA6grMCdr87VrWbwZDBFuXYw31Tc/x8Zndo3snhjFvHrA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.17.2_1593669505371_0.29316771167200595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-ripple":"0.18.0-canary.ca6fc6de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-c7qOFjZuQAUCsP9BlUgJXig6M9YYjGtzDyAKf//KiKjCwb/Ug2tiNtvJRpYhN07xx4XGZrZtSWbcpyC0zt7Whg==","shasum":"241bb6619db7344a16b88ca83909999bd5668bba","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xe8CRA9TVsSAnZWagAAGCkQAJPmbbFhXS78GwKRe+2u\nHI3ZII5NawJz4obNwLuwxRciySr9g3OVoYoIRKPyudedj2vOIeJRdspRaZkf\n72xJi1H0VSFs8AZp7DljEDMVrFgzFKXio9LgVWStBcpBOm9Kdg9Sb2pIxJ54\nYF+KHSAFapoDc6oH47cowZA8hmGE0TbOSuvM+E1ER9cMBBavtFRIDzYUv3LK\nCILaCr6MXdNvNDolQcKkUnJpNmmlLmiiJIbaKNbbexhmDtuYS1vRu8/OA5IK\nrBjXOgZOp3GOGkpz3BxsxNsqYPoGjwoTWqv9H4cbTfuN9nhx8o874b/Kg8qP\nITmABUQTpsV3mlK8vRFqEp0igKKLNVy2RWwlMTgTVAWjV0AWNszVa2ddBr+W\nyhR7akgaKt5XVMg10fBgXGk1HfM8nsCeoPno8tHTXxLeoHE5XL+QSHM7MoXX\ngGmHEHev7NyFJCzGJU5eLQlVuYUFa40m16VVAgdqTIUJll2DNvmbYRveqlJH\ndzatWnWqbkyUkzbp8lArM0S3IH1aMfPfwbRCWT0X2s4VGuJTMpvP1FgJKcDO\nxq09Igrab+lxKRJ/JXSikCLziTbp7mVOD5SDc8Su+/oEqfqcZMULXiJHpedK\nIrUSNkw76UBK3N9O0+9011+slkFp1SAwdRgJd3oSx8aVpGojufviUPDY0M6f\nqc5z\r\n=igxn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf2vyxY/M3y2HKrWc/Qz062KqCfXE+KDcokXSmJIJsawIgE1TS0q97iPIrrvfmPsJrRfA0WwuFv9U8M77I2YTsxqw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.ca6fc6de.0_1593669563808_0.4357327734362171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-ripple":"0.18.0-canary.79f1ec2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-u4DpSgg5WQaSG9cxmwfJSjzSpr4iUmwIRKFtUjHFHhXSaN+OGg8ybr1gWxHNlyuPpY6rATjEsjyYbOqZ4oia1A==","shasum":"1e4b3ffc2261237b646b0e0451fbb1b6729a659a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGwCRA9TVsSAnZWagAAPFEP/iReqe9URdyoMjFbWcU/\nQboBGMBLGhL5IThcO5T2IDCBfexx6OLNYVQWRa6G7mlDHm8y8xOIakWYga14\ni26wPlGuub1VQrVW62lukL1LQQ8NCmWiW5iYPajB3mFtfcUeJCvNvL+WIpJ+\n5476uKEIzVMs0dIbPt+/byZAfifDFLwjFfbQJ9VOmeqQR8shgUIunF7cEW3C\nIPtErmkE3wT/A1fUYh7MBmJhcIPHQx3t69xQfTE10t6Q/rWCZCKE/UqgR0EN\neu0x5iOqNmJoQjW58pbTTjZznY8vwobyFXcogW7+OoOlH3+JD6+/DccbzUYj\neFZIppb97N6urORWb2Xev2ZvYfTKC4Iw6AvOFYd0/83f+mSeOOq+5vhtL75B\nAdplrB9OjyMD0jpXs0ZNbNU0z6tOG1nc6/yOa5H0xoejAkniAgTkd+m4aZLW\nRopq79Zoya40VKvCucAPB0ce0+CQ6WOzPXamk6xwXYjD8av7cO9b21wgruW2\nIoCeSL0Ca7P1r0jo1/C2gRfeNARttkR+2j//syLuSaTXpErB95ZjJpp8thI/\np5U/mZaemf8vTkAYa1fnv6pD5MW5qEK99clcKAZdeZRyyIz+ZEc0CgrRo4TE\nfwWfJpzlWMtQLbPpN/dGS6XEHAtqMlaU9UpfBST7Qfgk2IntO70RALzg0i8K\n1kel\r\n=lksr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrpS4bY5R3D8c3Qfu8rV7mCruZe5uaHxmiALYQpXcoQQIgf8nmTYHAxssM9aOQYYrP6SMr9yLgxoEvtT/clT9en/0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.79f1ec2a.0_1594143152522_0.04526024212155466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-ripple":"0.18.0-canary.a7bc45ae.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-w9sX2iOGx0It65dSTPtDQnTlvg+QS3YePSM4MLtT6QtIKS/HxK+/rAiySTrclOpWgAOuFfZj+Bzsku5PjKdnxQ==","shasum":"485140adb628f993d22a9dc1a1878985692e3e63","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1J/CRA9TVsSAnZWagAAIUoP/0staLI3InA4wtI6Tm/k\nW7H1kMkcyGKqvJaqFw8Hrxyct5uNkztujqjxpyU1LyOFrOAsduI8JLlFnk5h\ndcEA/2lZNqcjCXUQbIAL0BYavyRetkHcU7t7P/U2Vyo9d80bMM9st6nH2cAI\nRv3AOlcTmPuHVhMcObAM4ngB5hjpkqroGvpw6l5ZZCUltfgGh7XsLO566F+W\n+aibwq/iCXfFX2qwdSXDLpwVu0ia8mWkS0x5ZeK5NbzU1/OeRtQj7lrXjwrC\nZG7iTXoobXnSlU2rApo/1DChTc1Y7sko/xs9ZrA5dL+5F79qzGayLpgkuQr+\n0b+1gbQTyUaq7XC2YLw1OUsQ0Pp0lZT9XMeK2OFSfQe2+6m8TwqAcS0HSx76\n9w/h0lJjLr141lAfRPN6ic0cEi+j0LyDeYxZd4MudOb+KU1QJwPxWVJeRCIE\nFKpP22JXqB74EnQ+slRpIwJ4zTHoHX5wsyDy8DGIx1WoQT1wwiJBFY5SpZBv\ncxretbjKiAIljTjqYO0kWE14g5OP7Ay4+ABSqyLxjN+4G1OMZedqD2vKS/tV\n0LGx9YgmYYESnpytn6m/GIw7zZ9YkpUDjqWuJzvGXT+YnzIOegZM/HMQSEHQ\nE0PYsD2b/01meBC0itoL9yh5hNKy9lvcHmL1wHP85anfK8k4CmOsekWPxRoX\nHMsB\r\n=lfSQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQbrWoCN8r6lOUER86itMYWEyWGElcLQNcr/OQ9DVXhAiEAsGy4UWFnukAuHBoMA2/RHmOYkarAwXix+SvtyTV2FQk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.a7bc45ae.0_1594315390874_0.3224581822943611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.b184bc1c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-ripple":"0.18.0-canary.b184bc1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pp1SZUs8H/aQH2/6RLDHj/vyvVPR1M99wKgh7T9lcy0qAq40rHrPX5gdHMoR+4LF40z9iC9ChgstyNtMHNerYA==","shasum":"28239023e567f58b1920e40b2fe53b4658b138f6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SrCRA9TVsSAnZWagAAEBEP/i7KgW89MEdt9uVfGcbw\nMX7ryF81Kx3Ci/IM6I70SbRoLP+7OWkB7GL5wtDK9X+ZtOc16+5u73L4Lgsg\nfRKRwyWXLuMCjAA3FPUNDJPaQ0/HRbvDFt2spwTbklrd1efLYgjLiAN0UgNK\ncMJlQMo/zyBIpfiqVyUYd1sT1HlBVj9eVol72cTnY1GZuYAdz4Qvks8JDPwN\nBDOw0tmOpKHpfTS6/7BwMve/AAwd2e8z2qUpCigROYG4e6/7LeORp8zt8qM9\nNQTcF7q+pHIYKc9sFQzbOtPRCohQT7uEkLiTqNUoN2yrFpcIOXXODV/ZIAgo\nZJWS1Ma17l86Fu8KOFoNfUkDb0KfQyoznEGy1M6SCQmHnQUNhwf0fj+lDxW4\nsatXarXNdwtpCSZu/u3p83l/47JRaa22GqTf9h3wFd9uiejNMwO3ZFmXxHCq\n2wlbnOHADLTAmM3okGitc4Dg4WoVCL6OZpYjOjlpCxjqIrAt6EeKdNBDeyIF\nd3/nAloEF3raiJGTgNBUIYYBNXxAMF1JAbCsr6anMLMQgXZkpGGeVhI5XE3l\nVqLbeCc+CJjoWQRY0cyaX1M6NsWNTcOMN1LECjLm+x+7FLpJf2yUIORUpacg\nGwsohDMSfpnNNTj1prpMKInKJBwwStQdfa0rzgQUK7PaD+75mDhoMYUBX3AW\n7XAj\r\n=Bez5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXzqY9BVGHl1GJYQoPeM6mSA8p+NlEFTksEUzHAqQB9AiEArT/Z2AzS/e0zJDeapjojk8X7Q9XyFEpHpFRKwfDC79E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.b184bc1c.0_1594315946577_0.1556527464841051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.b39fde62.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-ripple":"0.18.0-canary.b39fde62.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-R4YhEzW+mB0r5fRGMN/oO75V9ATJtmRtWZxK0Qaw7BK/uDlDgDmstVegu5yJmFp396w1EWSdShMyYgwGvw4AGQ==","shasum":"24df49b5d6af83358ae6b63e172cf0cabbb69e5e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XjCRA9TVsSAnZWagAAQpwP/2ySHtJX0h5SxevqbKqb\nApqHSLFyUB2OlEGW7kvDCgty01CuSt/grVsXs/efCMIVmXsZXXrL56jX/4sG\nd7QEQ/jD+MxNhJiuetexI3ywfR02serAN5pjk9NkauKcPNDFatNB5GsGi02S\nHz8/jEhoSDaFi4fAQfiRGN9a7dbssbJMGnSBGJnvUMh3DZrBsa+f3uGX0Zpm\nIblNzVCXEU6JOGvrpRuCkOscx+vZIlgMOi5gaq5fco8K7+Ubpzqaxo2lQzES\nN6OHE36PJRzQsb4mXD+Lh95UnjTcCSlGSNgI3Q9Z+5VVSWZGHuHJNfaO2RhF\nVdauv0wAA0hh/ItyiKS094NFX+YAv1f68l5kmSW0/EpsrdR99foElDW5NCvS\nsQ7y6l4y8NXjgLcRWXbsh3pSlKgaiJ6sDu0g6hRKmxlS+3obC6Y9CwUbIAkB\nJG3pztnnq5Y6Cr8tBKxSmusMCY5Jw7SFXKJ9fPo8JLKbd8P60AAGlokTqJGW\nL+0nrUpIRe8cXIM0mAerg3JTuccfRqlnXhMtOdwxb+3eZuUK5i6ck+jAacL9\nY1owWIh4onDx4aQF6XpPAihJYKWcoiqTp3ODezbxsMlsWIc/wjtEoqSxg3L8\nh89ACJ7zQUVWpYDh20ntcKEL3MxChhKS7pPTk1CZT4LUp3aLdB3BlBCmjNAB\nAbSJ\r\n=o2jp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8Wpco+JuOzDvd1hHWlsj1P3BRTJbAFHAD1zq1MgT2FQIgJEem3gCw95cQmLOIdVfRxX4y2lQq+sDAFrFEBSH3Yz0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.b39fde62.0_1594316258967_0.5326531300688786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-ripple":"0.18.0-canary.dfdd8d6c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sLbghF6KPlFUPEH4eWQ4Y4N/JKr/UsL+uUFpUgapsPOgQHKdQfDHISBDWamCAXJ3pDmddhgQ6mfwEfnu/acirw==","shasum":"eadfae03fc3f620f5c4fcfd73ad1e017b458765d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EqCRA9TVsSAnZWagAAO58P/iX/BH31UZaMGO5n8h8l\n+Gy6Wqldvo7nD83Ys7UK7o3ZLLDPW6A4JKq/gYjzkZmcZw7Y9NJqeYSx5bMY\nqQBeWFD/RydtU08TCxTsssqayfeKyA5uMPtAsvMcJM89KORdm6B/Je2XQUY1\n33hOIOXsIgoZkicTQZQFLt1M8ldY2Df0YU2xspcyvQ+b2eqBs8Yiyh76aOLY\nFYlrpjZU9I1qFpymiUqERLXQd/CTs1yu9Xd6xHMZzyKQlJr0ymmzX2n3KdsL\nhpMnyyLPVscCQRUsjmYl1/yI/cZYeEiwKnGRSKpvHmBDhWHeuTu5aCrfvNzj\nzpI7A0zsgvQAFWr20YUWb9a5JIvBa0ZBOJGVUOQLvKl39Xmod6P0idN0DYA6\n1MiucoXOhvf+UYXcIERVnWvacM6SkXTamKo0orrRAJMVgolLsHG6ohZiQOqJ\n2CMMiuMbOQH8bupG+3ncUcaDogN1cCGtSJbWRkCET6ERvK4GwKpGGYMUpXy7\nVur3Air8inq1qUCUf1/5kBbxj7iHs8XhmuZ5j2ssafxY0WVvPhQLmmlq14KB\nEnXuex7xlPAGkb3HYsIxFPbqGZAqcNf1Gqc4x8OznorQc+AvpncReZ8kEI2J\ngHbytjuI6+d4gWV7+apSGkL5HSZUrS0xUbR17g2Gym7OY7FCZCC4Kg1svN44\n5Tlv\r\n=6RnM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAacuw0/MV0hl7A3oXs9Mx/jwHq9BZAAtBVkZxmSVWINAiAvMXNmxxIvtHTLqwAn7c7i4x7/Qb9+FqibK1NZeCVdzw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.dfdd8d6c.0_1594319146023_0.9538669351770912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.11cf2694.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-ripple":"0.18.0-canary.11cf2694.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wiFqngM86s3MQx6PKf02jWc7wKrwOm7y4BYpz9hhvaeGqh9VpPaCWzruvQgTd2JGKfoOBtBCCIYkEUv7AcWxQQ==","shasum":"c4ba1ebb909073d12efa4cbdbbce5f465be58e69","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FyCRA9TVsSAnZWagAAX+4P/2jEVRnsiuxgBjRRjOzN\nMX5Uh5xiQCDCFKELvSf5RmIh6jKCpyunsvnHAU/QpA1rVneGim99e17hn8j9\n63V86Fmo5RLz0UMvJtBEqAkdzkSMiDd8LghkxyuMdi1zvTOLeFtYOB08tqo8\nh/GKE/pgMpNpsnTR2bWH+kzWxx/eoWHi1IRajRg5QIEcG7tz9lnaKsr68XqB\nDNKjORPRLH+0w+QJeApQWRaCOsmgzbBvzBh4Vb/oKl+/DWe+uQSLQUjqdY7x\nULPEX4fDOji/CIlW+ULW2XGw3OKwtAmAnyhep8x4eMufb+IPmALd4cIj2SfG\nAzvPGx5jehIj7NHwb5cBGCOd9GIzsi1PSPbrbItKnucWVJsCcXd/JKLHOKB2\neEzaTtMciIIefc77EOghesKVUWvRi+W5CoKtk5Hs4MnkL/EW3zwTFnERYYLd\nN/ZKXObpckpr1ehubW2fZQf9CH0Jd1t9fsymaHdoV/a96vfJwhhfYxHwsQrg\nAHlkpOi7TnJwRiuk6kGwiE2jl9XBdqHy7F3d0sOnxTDlWZWb3zfKSssvYLcf\nTvDHOjWStgrvoWpcCaTEsqChF6tFO+fh81JxX0OtnJXhwVl8JQaqK2Cwg3ZF\niWIHO9GSibyTfWPT+cyv5NYnv4SwXyG35LGWNBTnhZKzdTh+Qk7Bbq6bkmO+\nRqET\r\n=sJ8P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjl8bcxEgMPBPD+1+oM+tatU5jKmngfKl9YHXpwnwc+AIgfy5nl4Vks3JOOiUbBSOsX31JcwJ27U69kOxHEOUjz38="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.11cf2694.0_1594327410406_0.9841112204097331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.436d66e9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-ripple":"0.18.0-canary.436d66e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8czBa9Necp35eu9vNRJZREpBHx5efcUcDaZSyTtsjXUQUr9q0EjVMSewySV3/axbAUumsBYgQE3OlMpnS7YIEA==","shasum":"1109930183f5a35e1a6273d16aa3782db97ba3d1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KXCRA9TVsSAnZWagAARSMQAJv7KHvsebMVFNpC2L56\ntwMCEOYV72NJPBBbZn3VbV21l/aSc7ey2KViP1DFtuqyHBCpqVsWRg22qJ9e\nPLWYSUlHTDPjbkcvMchsw5fRGF7D8Y/xnAdC88XOwyLVyQfFjekZc/4hN27E\nz1aQFsvkhFjBP3Jd4GtU4HsX6MSIkbPvE2zASL8I30fk+ZZdg7NPuRWpa+uz\n3mXh0FfoI9HgoXsYsFObArnCiBsh0mqn8FECenXbh1Kx3LSTNJ4VkowOREYj\nF2FejZbqaM/B3rR/IXbJBqZnoHWXIy+b6kAeCd0kyAL4bzJR4tO+mOHT0oNT\n8ylpi9rGTUI0AY11mWOBCJ7G/gzqOHP42ggLXV35wI5vClKPccQSXjrQjBCh\nDJeSoHpunE9ZNYxCcDvS/6PYPfKnIsls8vLLgXMA7LMnRn6bCh+Ldz4hI0eu\n76z9nzZQnKeuxL4zMR639gqBdFK1Hx7pG6JZHM5VqVUBUMAnbAZFAjEalGPH\niOOsuJSZJuZcM5n++yRyZpmWwmBgT+J6ERV64MlHw3AIJ6gu5afAa+RRo/vw\nnjkZT/UQOMLbg4yluADpmiEXCGko8QIxjNFPU58XB70Tas69fnokbpKeYwsa\nksoqqzzVPu28TUug+aRjnTBOqd8+0vIwSmyNsy3hirqYWt5NBsq7sLB62uog\nDDZW\r\n=0xl6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl6RzHCvYAFbQi33SE7gKEfM0HuLdKSTplXTPbDXnx7gIhAJsK7nQPuNvlxmSz4j19ECBFXftBH872kHQak0/y+M9i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.436d66e9.0_1594327702729_0.5497343449930192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.3a44d36b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-ripple":"0.18.0-canary.3a44d36b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CjOjBPJQFg6zRkjCxAY+/IFdy3e4nUh7DkJAc0+QMmmOa038VjF9pP7ubpD/UOv+Kc195WUAVB0mnfdUeXaXDA==","shasum":"70171215025e1b0a3ff247f108890345dc6213e7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hFCRA9TVsSAnZWagAAU4IP/j7iQxCgm4zX6MnRsbkj\nFbOMab1e4VejKFzHKcwuCankikFlkD6HJgm4y8PRbAgg6p6das41/XDfRcxt\n+vbJEqfumdMnta+a04RwqcbOwXE7qkIKsrXuzheQp61wot4UYbxC6e8MMLB8\nKMyK1N8cLyYCL+evMOdO6VfGQB/mpp/Mcml4m+0bIfV8NtC+qscQ46t/HQ+g\nQbXR1mYuWZDnIsPgLLDxEBU6LsB/1tMa/LvyEXBhzQvW9OgtcbdEvZfk6IjN\nEWRCvNuhSyyKplDZzi7CfDJsNVHq4phb5Lbd+0cmPsDX+9Y2WfRr2x5fOPTk\nAS49cE+O2fIW7cIVMc0yeLUtaHNNnapdM23VWE9YXXqYKc3LERkwRKwDA7jV\nNTzaX1KB9H4qi00O9rxvEP3s+khOR8ECRtnCM5dZeoInS2c71gkPCAUB/IXx\nyFNvMxRrANlPJxhMlLgXTk5s8+tWTEEasi6vKlNsgYGvh1nKYG6WiQ/puHOG\n7SWScn2JE4qXxkl+2Zn88CMIlIfebhxHwEMOlR5IAT13wDCzbDm7DP4bhSbG\nGC2YVR29T1Crywe93fSt88aO2FJqJxQVQFl2rcWZ50tGDZcVkk5lIY9G50d6\nkKNIVFqZ+VzXLNrAPTugumnVkXYNbiXLsqxlyFuJ080U++2IgrS3M6Xjin8V\nCeGp\r\n=mjRa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5vV6hgAoqtmnc/m7TpXX/CIIsY9bmClEDkn5vtDAWfgIgHxkPQro673T1rMwiOvCF4GxhP1nXHeY4Ax6/uelPFIY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.3a44d36b.0_1594341444756_0.600530454152211"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-ripple":"0.18.0-canary.ec11ae6e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1e7cb6198.0","@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XFrbNp+FsD2SOeTAY6cVb3yuIsPxyFjXmHNcOHWZxtSfKcDKsz7LpvMIS8a1qtYnzNyMvTq3UjWQR0I4kNgkBg==","shasum":"557ae503cfe61434dea0b532a0ce6a4df8e61d2b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKr/CRA9TVsSAnZWagAAQNIQAKMQ9poizhG8/cVQ/Otr\nr4Xetakkl4mBQ0N5B0+yjdVK8HaP+1CaLVDkq6SCiYb0Tqy3vbGxaLoHJ5qj\nU4ESnM87T3NiaMCcDkM6wB6XGKa2aBkcYY3qITh7B2fae0Yuy1BYnuxtpuqN\nXbcOOwHGJeRlTUvJIo4V6Hpr2diipBMXKYuxxjQrrWK+j62TDCFTzd42v09q\n4eb8nqdygWcuplaDa4u4flUec08A1EOxexaMVWhcDaERxG6wJqs8iizAyj5x\nH+Bbo4jE7NdgL/lr8I32VBX4UjwkncByRUyt7hHYF3IuTqyw6CPweYVx83vC\ngBEUT3ySVr80gTM5KipLfsHPNub1F2L1C5eeQVzI/1p38i5LOzqWWRkuJkDR\nWRygaXzjdox4izLeOebByBkFF/l1H1Ph4HKOdBnvRqYEmEpf+apE4tXA9nxy\nNFxg1r0ezFxVdB/xJWUrDuS68vd+eD+ZeYE9+3r19LJjp1kY1lWqlPWb+e+Z\nn8tmj6zUKXMRVyddNzX+ZTdo0tXZdGDuoncUQalGY14ZY8jP130bGVlE+YvW\n64bFu8ym5wm6u2yDmzlAj5Cf6DChCHfvPvWUCKSDreVs4cS+1l7/Ru2CcZCM\nkuMqoSWgHLcXbpHNw4bsUCnIC/T7gJwJ9kYk/bJsIOvoLbNHJO4GijYlh0E+\n2Gd4\r\n=KMJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFR7nst0jv+KfmZzRH0wGse4nfldtUMEvN3eHzdNLLdmAiEA652Ji104d4bjItGUBx8U7qdghUY8VWj1QpmNE5DtwoQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.ec11ae6e.0_1594403582688_0.153323204020402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.17f6cf27.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-ripple":"0.18.0-canary.17f6cf27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Z7JOoXXYw2zRkfveYFcvFfnwNAi7FAA5juQ4KZQfONT/JV9vSZWkaGk4hDT/GoSM7d40zyr7fF0nQVr0XolK2w==","shasum":"c08e9485e41cb1e7be5a0d15d1d91891ff992adf","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRTCRA9TVsSAnZWagAAmG0P/AxVf+h7vtDH+ELzPajd\nj7MmWRghkH/fLjyY1UfUgQjaIt1fSuGCtmvPOXjEBEqEJjEz3sfp5iIC4HfY\nJDJo/gIJSN9U+30ql5GOpGTjiMhW4D+2FzRXSAapLnTPavuGhrdFiQKlp5ny\nUZriCFWGFTyKwjQjLL0fG04T1ho+0gZvYeLBT8eHBzDMjzARO0K4/3Geh+jG\nC8/m6Ciiqo1jGfg78Ox9hCfI5bjruNLM098ec4LcOhlDIumG6qtjnSzdNM8M\nqNr2jQTmGG+xKywlsPxXDcjNMeKIpyaWYCBA2Bic/1rGdNDD50kqcOy95//f\nwzanx3SNByJInplBUUaX4/QVAOxfJXYuD540UE4NgcwdsiCJoZa3ern5JxR5\nBIql2jqpWRMgkNDSwclL6Ta9/2M1UzWnJhQasB8rIe0525wi30d2pWf0urRj\nmhSHKWK5oU8wGsad8pIuLUKUttJofQzxXIovJ0IhnFsDD9TYXw4JmRBbPlHh\nRoxPNCImJKl1LPJKr+wwSw9WuFDeZ3rDn8rl4aC1aNmw1RLLFM+cJbL8KqBc\ncbUHDU0Vy9Iekf8IZegs3ndNdnZ2x+ZiL7ABJwZbXbFPi7qxAbpkbbTp5VOc\nz4KHRVWdd4ZYcAI4JzRgcAA5CUKAQIFAg2EovRM/Igh0OpjlYTfrNZH07t/+\nUc+n\r\n=KJTR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYrvtI1r0EOo5mhpKYv1sdxnk5JXBwp/9ZtLrWT5MdQwIhAMiYadyEHmnRvurQxT5nXDORrOURBBh41YnJ77Z4IB4L"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.17f6cf27.0_1594405971327_0.725160002379474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.efdfbc21.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-ripple":"0.18.0-canary.efdfbc21.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qfSG7mE1071zlxQLUjjWYT2K9LuHpnBXzz98cZ6+w1cluYoaIPSwKLNGiZFQfqNENsBPF+HYitXlRcIdXLp+3A==","shasum":"50741515e92026eefff47335cb8423e2840214de","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcQCRA9TVsSAnZWagAAuHUP/RVdFneCxL1XMJYLxfj+\nLJCs8wjIZem5LOTdTzQmhHheblw+/yRCumWYU7WCBGCXD4LVtJaMtNRP316K\nSVw1oLvdSo7j2leLsnlBtG5aphGSljyHJOe/nBH+VjrdiOxmMY+VED+cH5No\nxergIl69dZmD8DgN7agbeT0sHtpeKEQT2AqK3aKrmjt6L7rTZmgYJYQr/lw6\nkkUsKzU+mdExyDUHfwjYID3B5UzWFkgWppAhx6oVwE5ED/sG//kYwQbIRwav\nOVWehcdfux4zUOVtmfkBkeS37HMgpXjU66sMYrdkOBxVbnnJW+2xVTa7mzlg\nMj7m6uwBy03eg86L508xhXj1RT8G1OhTpZ64jyJv/Hnjbm+f8qPrStDYRSZO\nB6l7YrNowEcjoJdCa7hQ8EJKtCyyo2jK33P296qsheZaomU7tRdsCX1TY0Ly\n59UDCSVNExgMBKoVy4JTbkfEg5ygxnKPI9OyHWaJmRZz+kCWgWTj4weL/O2S\n6D6odyt4VhEYs9h3coyEMnzjh3e82x600rr0H6o0av5jylLsTVZkzIQyres3\nquu09sE7ho+azcyMW5kwU9endIpzOLJbHN3ULJV0JD+MzFXrOLdTsQV2uTBs\nTCVsQT5p0Khg6OkXbI5nQnDCd5JRwCwjs8dBTpsYbClIJEvKimoezuv7UXKB\nz4Ub\r\n=frdC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEqTh3Aj3dKEHyuiZdJpIwrO1qBW1WjMAds2AjA4+yGAiABplNo3f8iZL+BNwY112WtonEEiQPr9lekEU7qhbQLSg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.efdfbc21.0_1594406672525_0.02366897194140183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.bae4339a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-ripple":"0.18.0-canary.bae4339a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.5dac1f624.0","@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qAyLvE5o8FVsY1/Z1zL3wnJyTAz8PzZfm9i0lkb0VPKFnrm61rqNteslgOQ+ir0ihWL1tvqkKThxcY6k7k74bQ==","shasum":"34f0dcf46ed43785fa2dca447c13aecf9df5eab5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBWCRA9TVsSAnZWagAAAeYP/0K/QdmUqVSlo5rx0QO7\n1/mKyi3poXxdQh4D3YhF40NR4kkLUU4a75mhm2Q3sA+DLTbu18OAG5ecCPgn\nk6rg/lDhrTJ9eVvA3Xk41uy3p+vyNIOsDmoj0/5vbcM3Cgb5xWr6XVaTiKFU\ng7o4ZZXV1GveRfi6e+uO1xJIHWY9QCxNw71+iFQHC7smV90D6Abf+eOMjg2e\nHE8i98CQvW1rygLXxfSW4gyl8fwGNtDTpvqHCYh7fIvcYm4SZSpxrk34Tdax\nqTjz6dA7tO3ioa4BjGJPUj9zt4gFtMLGmmL+zeRcUi4c0E08LgRm8Hd61439\nOZgZC3S5hAr2/fhEsOWNIiMVbXC0gs8u8uyOaqYoUEv04AbdNGXHXkT43zJU\nU0Z6TCEm47d3wE5W6cmR032jNnLHUbGC0R9K3F1sRntU9JtOJWYs2Rktt84s\nLnPGK1uJP3Jc+8VTx2p8aBpW+h58pjG3fXxSqCitrDSytL74kZeSuBk9Qebp\nwuu/Tm8d6vuo3yPXUJUIUOB84vO94SYjVt7fRTN0X3+0EV2chTU8tivwx0rv\nHK0T2p32J0Y/tws2XOn2JQTU5Aa/ioo8sL6Xs1LbdPesze3hLHNZUDvEMLBy\nXf/zW4p5rHgWibecJ+4hKj+U1EzVSZM1QmcYwMY+m2Sr3KTzR+avrzJGgb1S\n9AA/\r\n=to85\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVJMxuLb7lSfA9zcM1pFJRf2CifK30goIDvLw1ruigcAiEAmPJIMhe7LyLf7gTMK2W+GpCSe4XrxIgvNErTouElGDc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.bae4339a.0_1594744917742_0.9006027670193555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.28eac13b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-ripple":"0.18.0-canary.28eac13b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.e6e23019d.0","@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-v45UTGvSAzVmVXlBghYwC7erLn8fP/0BWaUDF+uN8pTYD5MwBJEb6l0ce77Y1loe4H9fvN/7YTpmwVxvK6gK0Q==","shasum":"a1b021a77c0da46a6a01df912d674bd9f08c4b62","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBfCRA9TVsSAnZWagAAxNcP/RxGiGiqy7lFRPqARYkr\nHueT7oKnFRBQDfgfhgrCI2Q7HEO651SM5Vwt9qF3MrWEs+HXdcZ8AdRBuRr6\n0UR36ZrOgqiiFJnEyPZe6X2acMOBWYLsvBDrs2q7pypG64izxndDXeJos2QB\nYkpFxk+I8obVpgQR/JoUYIcZ1W31E29Dfo2OL24bfIJ3wMVNiil5dVk/rBhj\n8jvgOcNJIM0unWJH+06woA/rqxbSt+yHByBE+aPoacOjUeZd6nnHw9gFte1D\nw4fsc8J04jfES1OGjgrGSZrVB+E3Pu+34UgkdgzrlOyTKJ8LmYgH9CkbGFYK\n2jf0nBiakfQ18DJ2hGh+YrbxF3bKPXHEoAtlTR3E0iCrMV7xRbrYjIqiLMHL\nAkUW7T0B79EYDb+nlhWCuJfxS8P0SCK6IlLyRVfPbagK0VXkNy7X6rhaqxh4\naYnxdfkwGvk+WRECLu2y8DOMhJDCmoyEM+byyeK5ocLQPxbMLvOwE80Aysur\nX4EUpSUk6oK8cxf/lscVhQpjq65pbYv/VLNHnM0AcZhsjzEN8anmsbeGAJ6E\nGx0Iu7Ei3EOmgPXmcU0r0scCiFvUd4XuHIr8uyLlAXvZ9ANUD2rF+KKBRicR\nxj8cA68JdjszTYXi0TcSvRBUNhJSAatbzCo1pm2CPPWC4ialxACrmkg35+SQ\n8dph\r\n=ZVmU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5rCABchWqxHjvlQNTp/iOSDexAy2nOD3np8GP6rsTpAiBm6pqShdByOLENZdpZXSjjlUnxNFQy7Rb14wQ/AanL+w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.28eac13b.0_1594765407225_0.49987761256476815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.44966b65.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-ripple":"0.18.0-canary.44966b65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.ad4df58c1.0","@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-p8Dt2hP7wxuXEQk0MTzBqKyIsUxvpCmEU+vSg+hLbh3t3f0JVF5Bo8z8gL0jKQ8n+0UEypxCwIcvQdhYaqp7wg==","shasum":"4d11df32b214c5a3388f222a695bf8d104356719","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VJCRA9TVsSAnZWagAAID0P/2csdbPZ93UkQKFcZRDX\nlJrAk/3d76ViGJ92Hz6s+ryjz4ZHBUoEGDBcLWp356R6rJqVU7RCnvUA0+HW\nWa/QpCK7S0Qp68lIO8bnyg/c2Ozzx/Smb5Z6NrLGQCyHNstIUeKRD8HDEtgk\nsx48bYGN0aFKD6oubogZefuLBpbxjN6BUwB7OMIZ+YsU0SLG1toaBMXQYjEI\nPRHm4d6ErGuzSSJAFVEn2vIXARqQsCSDn3rnaahXvJ/dgQvY9KhiSNZWlx/a\nXkVj7yDMBxMLN/Zfl9e+/TIb9Bdw6mpfKDSOG9JAgkqRcesza52eAxpmtzI/\nyOS7fZKXOHgscVXwavCu/hOp2qlmkwvGUmcoyROEyBZBF4iRkXPnQ6ZX0txD\nlp1GJ4YiCFUysUal8470/uGfRnNYF4yfLdLTA5EtABcIBUhDoUy1Z5fEYsmw\nbeRBFcK6P9W8BMPXgK2GUVsAPd5nVnAai1K3/X78G8JjnEAALuQz2Kx9Esqz\nom3fpjQ90gt4EFBR7H3KsvUdivTCj36p2tmE0+p73QCKhRH/PEx3WG1v5DR5\nuV8iZkZVi+IMYMOBagc2ptV8GdC29/6VbbrQgM2ZF7n//9xCFgeD/7SVVAXX\nh5i5UPEDaVi5n4u7kVx4s4V/jeHceDkQ2pQdqHtzAo8PD17KIgb8xg17RQNo\nk9kX\r\n=NIaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJgPVMNhf49eICQmyK7tFdcLd/DIY8I8i521XASJIr6gIhAIG7XhTyeyXhhDA1I7ex8+XFOqyab0VCXqFm5gUmj39p"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.44966b65.0_1594836296899_0.8207462793975753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-ripple":"0.18.0-canary.3ef0ef60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TDH/zcKul0eBtVaUPceC6nN+vIomKs3RzhFCLq/zyz9QXQ+doaNoivFy6CO7rA6r1c/b5kVcPMYtLHrdaVMsCw==","shasum":"b593ff0cdadd3008e9349a6e259eb2858c99fee6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZQCRA9TVsSAnZWagAAIzAP/ieklOxYQQfdlIkTNtkA\nLhZG0ZBDZYqWClgz8S2/pymzLPOmVtJxRzxMHaSx8klxG31SilWq7ZdcNGQH\nKSPLX8dtPIZ5NtJ8tT31aXLmpXQwnMMJpZG5OZhM6fZ12rklj2wrDVOM4XNR\nL4YtEi/1VQya+taTc/K6usoabWjPt3tM7UtM74tniFBaYBDDSs0/NtOG+qhr\nSmgFymXt6KMSMDt9Y6NPAGXjQ5e0EiUn096l7uZ6p7c1QLd18ABt9sWYimxB\nvuUG7RMAkQxnna+vsZF2AaIwR+QwkGgPPihkWMXXrnzJW/jMQyV8MrzI66yB\nAbOxzZ2VdljxuzwGJQedOrZOZw3RzrlxLvYLij6q7q+GnKhduUjeAl7w6kX7\n7vTRiEFUhM6NOPo2jxOgaFPnByQ9K9YrRJK8BDdfVvwzt+xSZxilgqpWHf27\nHOV+0MNgQ2SB93CU+NBPu+0NZY8L4XcJS8xurrJcqRPjl9HObRk7TBIwj08q\nShT1QvB6hIEqn5SdPy8Aj8tDADoppsStz9BXmae6r2Vmkaag4w+Gqrqx2XXM\nMQRrUhchfsFOGnVjQhKI/7Z3Kzb4lws1JL3pQvmGjTah2v9hHcTjFJDrrVFi\nkBwOnJ6cV4eD7PteoP9JwHKcW0wGkSp2Ph5wE3t1+1dxhYkvrCPVilhg8dC2\nFYA0\r\n=kY6R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8qsFc+NfnqtmcM4ubCU96ozMNhDc4d/8CMqVLBfbLWgIgQOgfDHNnCBDQdemZGZUmh+S60SBHFQC7q0TXu6EM2W0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.3ef0ef60.0_1594918480052_0.5821045709550965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-ripple":"0.18.0-canary.fcebf9e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9tG5BopIzzZqcyux06ZoZVMfxoHnA26KTKai9YnbrEWMnlEij9/JDbovqxGAQJIdxTkb++N4cuKCkVKFqOoc7A==","shasum":"d8904a7f17de49c0875944f4813703ab2bcf2f5d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZuCRA9TVsSAnZWagAAdzQP/1gYo5hujrt6yy4t/sVZ\nn/2PHStK78WnXQfStYfnlYNTkqaktAKy7qcd/jJAhNGLwfkZtUQ8Z3uN1/9o\nSL4kWohpT6Au6/o5ZRMFzUAvqE0vBnLM0zEp0MmnPj6cfyPAdwi7KV2nbD08\nmHN11jnljhgfZKJk6IPK3Z3qDEu/XDBo/lg5MgE+InYu3FaQtNpRmifmE49/\nWTPpkuxjtWp+fWADgOifnPy/yJjxb2juKdSOIObJ0wWJxg103OdXYO9ZEAfU\nKylgKlehbY6Q8NqTQRShe+eEcH9PxiTef3wQeXPgXcInh4qT9iowMFCFT2V+\nKiU9tT3KOJhOEvlZb94OUl1MfUMuRAiNZjGfeGyYp9xlfM5oN0Oc4BLCQjkn\n/xGWHwWvNdxCVIGPivMMP9Yz/OG8SG3g/7FyEcC27nZe8+OioxGRRj2g2j6y\n/5copJZFcVRF19kyNaImO+NdctCky6O/uXsyuhh+r2mDBig2Ko+lVSHhFxjC\nx5c/V0+Te7dt2z1XErJTOc2B44t+IPFLEagTBnihFvOVOSwzkLMVKOLYrolz\nRZyHGi4392tXQYyr1V4d3/4y5mGRkJi6iHt0yC2/w6DNosnqy7eLNi5k2N96\n4G3VlH14058V91z1gIJZlyKbLj4J3Hh1zFGc+oUENF0SfvcdlJ+dj+u+4Qnl\nvbbb\r\n=atcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGh8C/pezHiGB/kARNuVGrzQFuqyFKmubKTV6mqHFsLOAiBj8DiMQuaX+HJGb5PIiZXwPE4ANWiPMbHvMHJhLXWAQw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.fcebf9e6.0_1595270765938_0.06644307791273141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.b6a772df.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-ripple":"0.18.0-canary.b6a772df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.fb5a4cdeb.0","@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BG7VHsqpcIrv1rNUlDGjCPN7fi6oDKv+6fRQ0gQn0Py3bOCTOPD+Id36w5dPYrYOf+arzcF0EK2N53Fhxj/PrQ==","shasum":"3738abfbc9acfcda38d4f255c4ce30f13b502eea","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7ICRA9TVsSAnZWagAAPIsP/2pRKBmgGYo7coktUjhy\nSlWMGTr9mlpMaFPO9WxQRcWiRZqzeIbsOqg4bCvmGwU3fxegE1TrxT5LzHlb\n53IyotoC5RewY3QgcTUVV2wjOX6gsbb8znHCEHoS7A0QtI2Kym9kXYorrGMQ\nfOQxNSKijn2781CIkFKR5REODGQxJggKdomPgkRryEkGT8EY+aUJw7e2+7cy\nDb+tZ/Arko4l4CRlqqqlwpGeHVLlu0YqnOtXQW+UhA41ud62qeNIRbI8zBMI\n9mGrnrd8EcUVHXkMMF3ppgxogOhbTd9E+FX2wRZ1M0M0f+fkekKNEtZFOPLH\noUWlFiIOzhfuR+LZEjYLyaBXIaAG9MyClI4P2LNhVqhkw9wGWI4zu2T58TSK\nSjXZtJfnU0DdKPxjYjLMXWe2lzpnUg9X4MZBB8dZAurI92y+Kwth1SVQLu3p\nTTUNRDz5xb6AHBwEHcSqJsbUILfTHzw4xEP6OPwdJ8xRHx5sz7KSrZFrvBS4\nTWxAgV1Y8ivgl/waVN1oEafRK8j7mm+Z3ApBhdFdA+tjRL9lqUXa6iCgOjV4\n+kcgg58F2NTGyMKTND0fbiupAEHoTUA2fXZp9NYXRqy91dGmPuvcP2d2au6x\n/oM5xKHdUbHgEScJLwTRdNTiXPVb7i4Cyc6X9TVpAG0aLV+Dt72eTdnQDxh1\nV6Cu\r\n=D9BU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbmNvT6NaYiD+o+GGhhE1txu6UuA6lex3DMUxM9GZeIAiBITGGHvUNYP4NzU+duxz1Wqd0BULp95qKv9OojgYlOcw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.b6a772df.0_1595285192365_0.7806595343647145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-ripple":"0.18.0-canary.f6a6ca38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kxd/a+gubOgqsGPA6fyi2mDk8tFOdBkOWY6cS6RjCM9tiO7rhw/uj5wus4oMSm5pSHHgclwLLfXuzdmccPAL5Q==","shasum":"f05910635130804e1899481a4cfceb34135fffb7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqWCRA9TVsSAnZWagAAYNEQAKPdrNRRkPxVNXWtCUrH\nn1JdXXqa8KSwIgN2DGNxq3F05yJ0mUWqQICOLkF0uzOHsXrh2FKtktX2Pw99\n5Z+j4GorrgLooi20eq9uHxDNF3UktXCL/wbPhlwpi/LOORdHmx/XECVzXf48\ngXXM6mIpZGM9PIvPKBeOoYRUSeWgntKbNx4WbNWlQtGSUx6B2eFTI0bBFxK/\nI+Opysx4H4vg5tfq12CokdFr5hy7SIbttMxyUovL/P2kRbKyYwRqGPYWN4kM\nn1Qn/FnRt7NEWzZzNPLt2A79bISfBq6hMj3wwoNkr9beme+E6eXSB+4PeH0D\n/V4R0QDDB+Zw0xpnpByWE4UIIdGfGonhnlj2pAjRagSnuwpWiivs4/NORaMH\nNFDX5PfWUFjZDRbBOmQhDEN+idyyFferjxGK5SaTL/+H0Q7qd75p9ZiM6gQ0\n1Gs2Yyc3uvlibihqBaK2L85EpS2l9i/o1IrXtPqqC2fGMpXmjkoLn+XoB9P6\nNIvKCVt53dzjcBE5zHtymKLu0eVxSFasUGD/xKs/EhwlHk8x6VqT2HUCuJr6\n/Pr8nibiYAp88e37zoQjC558hqQrRwUz5n1UGvboRUvqoi1q3RVPbPW/tAIb\nFne0ZjpkH9kJoUujOztzy69mIWSjvwnw8WefDryX3sP9W1sPu6C+isHA2nfX\nD1M1\r\n=0NI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDrkjpsDuQVJ3Ss0MIKukSZCuLvkrAO1kmIy8/R+zPKAiAQsis2tXn+UGkh9ui8i4cZGuTAilgtmtTG11hna0juZQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.f6a6ca38.0_1595349654011_0.1952692405739569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.647dd6b7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-ripple":"0.18.0-canary.647dd6b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dyrPk/m0iFGlg6iYTPySDw19XtN8mp/GGVeHAF1GgrvR1UNJuCTb4fxJySfQD+23z78OCx/NRjtZOt597FZ4wQ==","shasum":"d4df6af8a1da2fa54ff1c25b3455c0653ed20645","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzdWCRA9TVsSAnZWagAAN+UP/jf2nCsLArE2L5Cx/lMG\nDESjow9jSEnIFEeaLM05yiLY9B9SPIEvnEZs6XCX88Ebowlmqy5u51sr1j0W\nyQx9PkuFo5Cnt3Y9GwV4nWS6QXZgBrDjQjgDJMJRwstlix4/myUjdD7kS8pb\nP0aMwfR3/wa0ebHQyunrkJ7En6fK+fC9zR8gCO0o2MmJZXtc2VwSJXeshtxL\nbmPbcDLe1/0yV1zpaJrzOffR24gviRTjXe+WwU1febaMHdtG3OFpLiVHpf3A\nCxADjquVUKYjdzbhvvGtV2rgrVtYCgufi5oyg8bDSIxMqucwWd0v4YZ4+1Z3\nQu5mj4c0fW+u0xhlyX2ylzkHK3O/x+kwoySiSa4zR+scz0lg9lWKHWPOcS0h\nctkfMQV5Nd8tplp9OQZqSnIeOGL0D0pzVTlh+qTotlpsUrZpT2p6jUQnHZrr\nnOJFvQ+bB6HSR500jFLKv0m1Zq7yW251e1qLkuxPUDvFkZI0qcDQzt0xq1Hc\nWDz42R8oZH4aIHXektLBlGL/s/PivDhBYqRJEqf7WXu3HGXCQYcTpIPf8EpC\n4+qpNeAPGV/HCcVvYeiBAbywpP9sQD1Y8sZfOaq8bP4845MMcPJuYyqajhcT\n5YnmfNszTJc8FEJtq88UwV80Sx7ECUxOs8weDCQ/ZItyAz6qhEGHf+FuC83U\nJtYS\r\n=jXk9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpow/dHaTVz8o4KBMw2dIIhVCdJjALDKNePEzQWijnbgIgLe2aYz5HUVD4dXnGs+I4/QLMFvbwOQMNiQENU/tVVPI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.647dd6b7.0_1595357013641_0.5865811710178765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.3cb7406f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-ripple":"0.18.0-canary.3cb7406f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-NFaeSXIOuLQMAcA8+NDWpFK7aRZ8K9EUOWqGtfFj4LyljvdMK9UK53G1C8OO94yrrAVYEGDV1SAoJiSaxwEqyg==","shasum":"e83ce942978ee33f19caa67ef2c7979ec6e389dd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwcCRA9TVsSAnZWagAAOrYP/jmkPyGpmIA4xbPERPJb\nD0GstVeXXWAc5/h/5o/g214Fy8LVWj8GfXwHEqxKMbbGo7h7CbYiBtM3Yzxq\ntIvsoOTPySIxKHlZ/KzBX0dZFUZtNqe6fnq0IROCgvvlxVwdLGa//s6IGHXk\n6aw0b/cVhuDg1fHxkVo2D18HwyDI2UNT1sOjLDF9AV9vj7t3SLEM2n4HnZP9\njwrIcZ89ZKLXXrs/m9ftAc4on5CzRHz6bTJpzCQ76fCik/CijkjIyFGUqtyd\nKNkuh0Nn15b8qDI0ZyucpbGFQO5DNc3rkWBWqXn73V2NlkI1OeDOoAf0FRxd\nWiRHNR3PBQp7VCotdE50dV/a3+9HaPk8o9Xa+iPY1ny5BfKhqEHu5JjVRnE/\nbqeJ3+z9U6H/AXGGMbjdkk/tIOZx8ukE8ayDz36rjbPDllDmLtAF2dh6X9kd\nT8OWU1pG+9oM8VEntfAiztTnJigSlxPbEiYo0Uny20L+SoI342ddHZ5hYF66\nrqtv5bJK0wPoX5thkn6J320+1gY8vKYGlcCizX+p3hRx1bltUG+NKW4+ahai\n0BB3lqKgH1kA/GVta30Rj2Lg40ww8Dro8vIW94bUcfYw04paXCGQsGd10meg\n6oVhrKIR54YGdOdYY7GUYLggOlQpcbqBaKc1DZwhSj3hFQ3KogPTVQM+uhli\n/zdl\r\n=qQEs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxXvHiW3L4OxT6lkQNb5ttI33/aYnPTCKbqDuOG/sgBAIhALdfUdIoIPf35rUyCkaO9REv+j6SCoek0YNWpKDGj6pf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.3cb7406f.0_1595444252495_0.02391273734439725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.5717a5a1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-ripple":"0.18.0-canary.5717a5a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cH6e3UFiZAoIn65RZxaw6lxTawf3Lv3p1v81lrY9Qun0yMr43KosC61/WF9omOnokwpI/gn3GyKftimsB2GKkQ==","shasum":"2f5381bae17f3da500beab60464209a132e1470f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLItCRA9TVsSAnZWagAA0pcP/3j8HuTLRT2fMMTEL7oz\nC1ysVcjJ8sElUDvMaDWB+2g6MrP4ejqhokDK+Ynp1qRcKhoEBsmVNWDez4IN\n4pofCt531gcyv7qPr0SVdSc7IWemlX3+RKHstTXOd7KqMJL4NE7ttX7Uk4e1\n3efrY46YSAVpGbCOrqB0UssNTSdAS1+TL/O6aggaj3vKJm5ghgZK9/xSlWK6\nZt+SKOrF7YnN25IHAWOFRMul51SAqs1zqDNG92svdXI/EIhY+uTEXfdw35qH\n93tdmIbINFPg36qDcSyLEBiGUIbS8R4a/rdVcLeDvznHc3cv3cNZBZ5TJj23\nBSTDXhuINRo0o2Gq+dYSBYTXqKEdiaMVGnjbT12J9ouQL2ChqM7tCzpZLIqE\n8OtnzfwjIS6gbSU6Wkd25CjsxLTe02ZJeRuuDIxfAP/MP27IV/Lt9U+R5YdO\neeQSZmKyxzC0gDMWSWeHP9s8R5ejdziFsyFS+5J5B3DN0ntr2Qw4B8AY2SLb\nyXJboP4MnZZLFfMrwEgN+Xq+cYDtnVp6TuJ5VsJTfvK+le1JuYICoU8aVfLT\nxU0Hn7EeN2TJ3CW5fp0zSH3fUDab2KVlPzIiXF2glSCCuxp7i2BlF8emQOyC\nN3YwP9Tjpas/qVs1umWvAt4b+mtCBj3MoZmF2TeUTaxh5bN1FEOMCRVl77wQ\neBxI\r\n=2TRq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwndOz3E7WMuSmWPNIm18ABwwO2IdmVA9yE5NG9tldbwIgFj1uzUDpVthhAUhdwK2xcpALsWCp+10d9AsEMi+B1Ls="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.5717a5a1.0_1595453997028_0.06501670206054944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-ripple":"0.18.0-canary.d84cd4b2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-g7j13c4UGth+SQVqV6bQuCeYSmdFJ27vCYfW5kLG5Dkj2pJcY1rEqKSV4o+qtbzVjAYXw5IdBDZntfM35bKzOA==","shasum":"d2f897a6f2af9931e18a40e9374ac58556aa82de","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKkCRA9TVsSAnZWagAABKUP/1SMZIYz86H0+VKxXdE+\neP5B942svRXYvdzK/zZ1ADLcUqeQqJITDRFMtsnpJg2dP9LE3FA3iTSnZSJa\nYG3qUEA6w1HPEeFIzQamyxNulTfQnCYuK3uz7GSgSqY8qzzmX0JYOH8jEpfz\nGDfiO0FxrzIdj8nZLH41UHmqrBeBnPf0C6+sE1fj04g6aII2ObULcQ0zj8cP\nuSCtghrATbi7g+OJIKT4EgZS3mIfbbsGP8Bmdg5prOMcgJDcH5ynk/7DoAlf\noFCZgfzWiQCM/TcoRgj7RLzyKiuGDmm+sPMELFeFKC1zunfOucp3I2QNi29u\n78JaPq6zxkJ8P5d1lSZqfA73VBzzA4BVOB1Y0LG+OKyhval/u8OVYjN55FI1\nvFQ88pTfm4r4ZzQJpSFcn3s/U4MBLXXnCtejjED92PyQp0f4hc/URP7gFUYu\nCQ1E9IXSkiSSSFLpnh7VWZ6xqMVqoFLeAjWjON6fHD3/mk+HmPMUUHe4FREn\nN3G1TjGHMy/LaXZeE2fJ7LU0tbx2/JMoNbqQzB5T9rnc33Bp+hwSbDGO1Js8\nFYghl+Tn3VTM7uRVQGATAfAufuju/HyHpakkuRpF101lJwQhd6f7JAlWL/NS\nmPs8QFr6bTeCNcW6m21c+tktNEpvXA/ct5PJmlgmCoHeWrg2fnmMmOoKWxg8\nYj1A\r\n=U4k3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8HPzM3W1timrGJH9ORLZjetxo4FNhr7SX8qWyD1DSwwIhAOm4RqpHDD8v0c/EaqE9D9CIMacpUxssL0tQfZqQNFuC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.d84cd4b2.0_1595454116403_0.03339857590689954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.f279e7fc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-ripple":"0.18.0-canary.f279e7fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1oVjs0clgwF7+4R8RUuMY+5NCQef2fE7uUUmgm2p00lcuPGBAoqFJW2xzJOe5V8VZ6dUFlztf2U/1aqrEuhUVA==","shasum":"a14ebe62ba8acd7250cf4de3e06698855089bccd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcLCRA9TVsSAnZWagAAwLkQAJ+H+JvO72SiRacHIyLa\n+Gb1gWZo6V0+fW/6IMCg43+TaJc+1Et074Llo/7ILhTaVowJ+xk0kxOHUE6I\nULNBnURJLD4irefOncOxiOJmz1wSoshpAb9EpoP2efFJygCRW+NQEdEm1LtD\npGbRMhjUdqH1FO3bWUMhk8VsuRE6e8xGX/+VlxWQzl17zwHHB2RW/gBIuafe\nZf32S+kts3vOpYQBnUCR5I7PJFf353n6bK3cApGliXRxE6GBrt9QcVnhKuiP\nyOUAEJrryVlCQrnrLIPzElpgBChMpk+5AZgIR+Vu2Y+xDUMfJqJl3cXi9GUF\nI0eZtoz/cn+ZLZWMFAkeK4caooiB0iTwUU5q+NWvazgzgw0OBxp8cbm0J332\nX8BPbMPKE7QNK1ciguZS6/ps/KiNm01xxZQjvc7glJufJI1qTlpfzmiMlDqo\nQ4/PsDwXF1K1vCJu6+L81Mh1akO7DIu9UEADC7dDfVjlnwsOzZsNJ46SLv32\nBO7mAyqgzxrY+cRhbCRqk2d7cqP5eyUZOqGN3Mcj+FrGttCXfPrny/5nhGGD\nIiIMrp0tEiNgdIu8F6BoEOMYDWKrLKnToUt7VuZn1TP0hGKW8J66BY5o0IKn\niPG8W+I8tt7vS8+oab06vJyLH5r+MYvHYPETlzQWV7wpNMw10u/RPcflGph1\nI5sj\r\n=G4cX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmhFH/msGkTOdpMCaItLHS1ig+3u3l4sQiF+wIRtHVvAiEA5LHGYFDSFxFRKKmam3QSW8bfK+3pXQ/o5An2T0/GZQc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.f279e7fc.0_1595455242680_0.4314945834120447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.f181e3bc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-ripple":"0.18.0-canary.f181e3bc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oWlG05joNqd/PtNpLzXsOP5HZNT/0mmEFJR/XIjFD7kgKCVpL+Ml6SsojI+jauOp4XeSpKoKiIuWnEB1vuygEA==","shasum":"81623174ac4b4f3154025529b0792a64718f410c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeDCRA9TVsSAnZWagAAEXoP/icTtzczkKzRDsVdMGt8\nq7oyLSLbF5J4Zu4RLfctHEsGnTXFMjMzaj1nnQUFaXpzU9scBVn5C3t6trvb\nSfoNInJn+28yrnb9qm99Gkk+n7YDrBJ9luEdxh07MVBSQbJ1Re4ZKMUTB3n6\nOH8DYEsKWPA2uNJJzVjGc6lTeKvqYpbYwUkH3tDlDPb2z2Kjbwmpr8nN+eZn\nYP3aCXFSAV8/0WcMWOQmZYohZ3LNnVqpQEOvhEQmOhPbun0rXFdzeZM6IZdu\nAM+4yX6QTzwGFxbOGp37B2R24SFDdpH+1PF5Md4YLCsQ88PdjWlfhpiDStFI\nsnP0NmzPy8HHM+TTvVq7MZNlN8tv7xwIzc+3++VhUjfuKNgmH+d0AiwS8cSN\nOOSSrU8rDiIYCVfgEkk+CA6llWoYVX4xMYsG9H6PXKWHDbnbsEb/+67XOTsr\ne5zfPXHkkad/8oievFqI+60cVzs+KQDCmkNrhcJuM9hWJSc6Y7gO/SlBG2zn\nFRXF7GP1FAMctov3ZBI2k+J7uwjZUyly4WZa7965HQKkR/taa4duXGV+/9bA\nnDxBVCQdbYYJOL3qho4yi4My+zIn3zZyFy/uicoVysCqYMm1QZwvU7NqmV8f\n3jCRBe1WKlburpO0JNhakbyDml3aSoyzhR4tErbDW+wVLEWw4j8ROz7fG4BF\njbnV\r\n=cQiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWlp2a0F2WrJm7kydsR3R76Lo5PHMbL1uVD3uTFBk4fAiBG9e13STnLv4Vsku6RjXymJo1PJ7zICfYHFPAJDht8kQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.f181e3bc.0_1595455363063_0.41843074360144583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.346a622a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-ripple":"0.18.0-canary.346a622a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OCper0Tuts6/Qs8ywuLh575BsHDSdKCv6fQEseR23BJFoeWczTVo58kiW0XlddhKAd1OKDKfQZ3CuLD8vnpsPQ==","shasum":"231a422a29e4be2d5d89ab118760642e7c62d15a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5QCRA9TVsSAnZWagAAvtwP/iNyzX2s57Sgx2/dH4DK\nVZiPNSJ59ACBsps4jD83yvxahlnShcBOQI1U2ZSwWYLribfRM2JADc2A6aHk\ncKsFvYbEOjC980G6vZIXcLf29KteD4cdTASWW+RhhCg7ejgoZ4hPLcvOk1pK\nfOjQUh8xL9HaWYgZ0POJIAl7QQWXREqBr0NsQizLjPyehQPzz8spnvEnKd+2\nOu+UgL17yqNnJ7hS+pp/MihDcKoLK4Hk0Er0M8JMU6kdBYVjAHUGTfL0EaOu\nSdA8p4yG0VXNpVtMhGEKxDyXhCR1ExWcGt49p2yXz+cS4NiPCOPg47UmjC5v\nMJoFMN3ctTdcGQZZQLM34ZLnLUHs1OrCH/6DxHHH1SKFgYhLfZ37+HhqGju9\n16Uwgt0lmvLEO/E2GG2mt3zQGpLr/wE5/Hu4CVLwm8u2yueBQa/G7D5etkQc\ny4g+MJoYC5OKZJx8DKBI5bmacsgzOiFNO5YPG7xFjya8+0utCVLq3jSkOd7O\nTJpPCv8oACygvWwxwGUzMe0Wjqb4MjwM5eaFQfXJXZy5E1MUlAt2KOGNiRCJ\nq02qQPrr4scNh5m/YA6g9KnL4I4WAKkUsMO7bp3zP+PSU4Lj7coo0akRNjuX\nPe1Bvehdrf7jyxP7xnlaiiPjKbZW5iwbFgiMuFXfbmUwNogkUFSB78zZBATh\nmsua\r\n=pll7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuk02R01OVrPbG4Izx3YUSHFNbzFDdvJYQcpYvgBOBtAiB4CNxqSfh3jVHT250TUFWzv+H+21BBmWYXR84db823cw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.346a622a.0_1595461200070_0.9623796794822659"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.c9e8a848.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-ripple":"0.18.0-canary.c9e8a848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-p5dM6Ki4pNvCmKjEChUZCrZnFhodFwGsjUdMGWEXfOrYH4FOocdDWUIdgmk1ClomnHX7AzNNgBuONchFbwZE0w==","shasum":"f249a57dee89b7e6b301d964907fb4632c0a6b6e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOCCRA9TVsSAnZWagAAgC4P/RoN0DlI5unGHNZQ54L6\n6iMkIFt/mlk+7mjMwH0wAp/Xk8azDDS1EBXy4sdkQImHg5i7RYbtCXmKX2gV\nms0nSWBb5De7ls/mm1mSbA2EJ7i/PIcs+jZy1qjOOBCXoluM6B8Q0K8jeQk1\nv74p36Dayd6IZQJhw7yhie4gEJjoHwAWLf6w9Hjwg9gLv3yAPl+gOQe7NtfC\ni+frBo9vsjbw69jYB8nggbMcPEyzhuNLAEYVeCGSZyOWbUE9cPwT9PgeHoLO\nX42fCmToCz/7T0p3jrFjvA77IjRlU+7NwVlqwz1jnJg2avKty2R6moQJZe5d\nYyOe6lL6+xhISfNfKFj4/3dHLrMlO92dKgcoZLLt/pW5vksJN/CzD5Gb3afJ\nbTta+aO9nAw/mgx5sqpxec5d43VD3og9myrJl4+WHdNP6dhA+fWvISc1xyRi\nkWmGGYxGFOChwYMbaBHiw9vglRQc/Ouo6s6beZZZfowSXFsxeoK32/UriZU1\n+auaE5y8RlxK7Pw8us0HHj+H6ykQyY/n09okgMXjIFHtyk/0mfsohyi7d9to\nppoisRh+W+soomfFv5mwqU3uxfyLkJBb++l99hyhY2HqTSGuKoIcBMqn/hla\n4I092/tkFgyozsf0MKR1+kpvLY+0ZPijF4dnbS++uUal07evMrkDF9qPi+RG\nfMQg\r\n=CRX7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDihcG4hN4ViRZllrsTwAxnYneiQ26o34y/m6Pg976NOAiEA38wiufVprQQRjoTNDEOJlg+KyswHhJ23SJn7jrXoP6s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.c9e8a848.0_1595466625543_0.8910275487447012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.718c385c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-ripple":"0.18.0-canary.718c385c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lHn++18o11sD/kHZE7AR+RCWVoWtTH2N/XH8h4jXjQDD+0RQkIev9ZeBkpEuaUGMmu5mFk3BZeIo8ZARRUVh5Q==","shasum":"3d187f39c993a8fd18a7939375c993fe16af085d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3JCRA9TVsSAnZWagAA7osP+wR2Xtcrfhu+TDb5o/JI\nbbMW0VRyQM8CG5zUyeWn3EqHRDtv8lR8k1OrWyOOURByHzDYuoTRkU2YTHuS\nqti8LhyXtUKGwqMlw+kudA88dq0eYHfBKX5XWKwYyNU5+nWjtwqlFLB1hEUY\nG0r8ZKWKALT1w0pKAeltJtBnaHucVS7IuGRJiywUBFqGjoJnY+jWU4CdPRly\nwLSDY3zigIaMXd2TnkH9oTdvsHxd+BxoP3St0wbzkIrIea3Gz/0S+R4iLs6q\n64xQ8SKQAltOmdYAnNeq+2jVGsGBeSwUUHJKmvNVZi7dZSJla3jqhy/xddUV\nZZB1q6mSt+jB1xKgUFLr2CRCUbdOMUVVP23wkDGADHpmaN7gvKqYtgEmQ7aQ\nnW1PzeFOLSzMP2rw51w08OEA2kfha5NtXsZv+WmpFHC4OP5M7uxGcQFaIh0E\nlsYzQol7AHr4zq+hgJkxbrM1Qpu0wJv6IXsUZ30s9yu6C78bEOClIWCl3y0J\n29aLzSKtagejNDDBYSDX4KoeDDbsIJeYlc+3dJRezR7yeKAyffI3ZE5VtMEH\nBXZ+PLvqw4FcuZAsEV9Ba62sFmiYZ2XVZUjZP/Wi4yjDl+iX86PWmiM0r0yL\nXD3sX2n2njLsRj65s4K6J7pcehz43he4zFYMxwLlPT8vO8VsTQoJOdeMF6gt\n14s2\r\n=LR4q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtdnr/rVJJfTvt3qfbV93CdK1G1O9uIdpC9mioH/Z9RAIhAPXzkTaVcjit3OHMG0GsSz+nZnurEyOdv4j09YqJKlc8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.718c385c.0_1595534792704_0.31310763440408373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.cd516a27.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-ripple":"0.18.0-canary.cd516a27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Rv+BXVWBtnrVdDcMm9BHjCSb6XygRzGmJTK63pcLOeHbAd2XOfSrPZQofX7gUp74LeqGw0YvEPCi1HSjLk5SpQ==","shasum":"f265003bc56fcffc8eaa356886c87efcd1603ba9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzI/CRA9TVsSAnZWagAA2HMP/A0SExd8fyckb4Lm93Vj\nSsS/3PPpt6DWwxWbyLdppucw3vQkM+QEUa3LgH+YlZwIONVZnj38/Any/uF9\nNL45fAwvx8J8IMzy1kbCPBoEgVMS3yjMpImQRc7aiScfi88CFTQZ0KQtVwry\nbvlKyFsIf2LFf5gAbJp/bxjVKd1DnrESvjPKNNj7DQZUE04vaopbZ5Qtn/9Y\nU3BO6vqBdCqt/m4d6E/ygoSaFvWwHVwLugvrOexjx14bIuKWIu4UB3vZvG+9\n8Fk5UA21e86Kztnrzxd3a2GOpUSUsZzMgc9qkcNXZcqkwz8QZdE2lylZ49I7\n+JLbZ3kRun8cP6yb7nLwh071m7MWtLspi206OA3AMRxVwK1hyIAPexpl2+JB\ncbYb8T6EYolXlZ8PnjE2WpX+G78k18hfFKkZFyV2UhbKD6eIYLeiG9hxZ2u/\nvMfmY+ILNuWjto+WMUSE+Z+41EdXnFvlDcF2ZR6JqQTBOfM321XbvBCFS/8S\nNZP3woxJ4PNMDw+i/CMdfQzlY9/0sBCEZKAC0eyD1nWIYIU8ndhjNYpu8Zs9\nevLRu1SiGTA2NDLmaENbd/NhL2fE9QRRWY/ABTw4QijAzdE/xQlHk/sQgR6M\ndyN9ooIlSf7pswqct3g9SkpuG3JGLjNYhDg89aI2JyGRMo43Xj2tGjhopnAv\nHPGZ\r\n=5Pe4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoGSciTnD3LBgVxixqRG4loiFwKbvILIAxD1Tcy9bOjAiEA40RHVR5y3Oen1aprj4vcHJ+QCsc1JCrUVNbj76ZpnyY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.cd516a27.0_1595617854635_0.06412372701900537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.1f082191.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-ripple":"0.18.0-canary.1f082191.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1QN9DkIBH3uoBrBHZ6CZfhFVfCubHWwqcJhM2PZ+13Y1+0uDd9oVhMr4XdtxNeIvnuN3LsLAiVvl3cyigy100w==","shasum":"5311cc17513bf958678e5f77fad3f11a950a0c3b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":105056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzN5CRA9TVsSAnZWagAA97AP/RM+ZGy3NG3aP6QIzNaS\nCUQKnXKr+8spn+Gtp6oElYQBpVqw+6p6aA8IlmMqrZPOs6zMbRGb7Ff3kIee\nqAabJ7YWuE7vvaJN0TwQDjZqlnf4sJ7sDJM2J4/6SponehMDpLlYcjkBCnU2\nCsMj+SjetAlNJEEApJHCIYUn4D08BQJC35QJk0U2pMhJStbTAqfidYQMMDFJ\n3hA6Pe0rjZJ9OJUOJPXgd0MygusMX1SxKYzBrea9qitMGczmyVi8FEWfeTi0\n0uV730VueBHOYYPPqu6GriaZg43r2D1DHWrDwO0z5iMHG9zAZoH1n0L9zwd+\nxq112UylxPbV+dvVA0pDeIMiBuUnqiNCeH2LyRNfyCOXZRXimV0Hc3SJIvGY\n58VU293tNyMyxWfOOMcRGD2Ecp1z5zh/tPRV/5mY4UWS3AmkJauvKZSQ7g94\n/Of21RNZq11qG4oSQGb8FylWhX5DO/ag39AlErDILhs0zhgiE9Kc2bt+rj2/\npvnDUl+LEXnFj1bkKBGtaa3WuW9hBt56ODkPLmX1wUKE3zyFwGV8iAOgFw+N\nzTpScxyVJXOC92i1YapO/0Zg7Hd6pvfBmGyHo4wv5FRDhX/XGWtlsmrDCz4h\nNXJvzylBpRM+KMEUyIoWDsS72uOR5iBjnOMhTEDqRAIJrKIiQwuBWskR3gvr\nGu1l\r\n=+LV/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/BXXp1q8A2w9cq07dY8WETKcnK3lAN1ym6yFmnVuEgQIgLyEl5W8AS/Jwpf88aZl+4WA+wBko4gsreKfZmpomYKI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.1f082191.0_1595618169344_0.15452407557362502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-ripple":"0.18.0-canary.ea3e82dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ql1+yPozN+vXPNNqrMvFoCPhXSsjcppNXTB4kq6HoUqmQGOcHAM9A2g/3MkViunUNdFMphHnKU8zl9Go4rrRGw==","shasum":"27d505fbc271a4c2a8395788425ad3c5250ba89e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSyCRA9TVsSAnZWagAA3j8P/1stvDQIQvcyudgUind5\nPCSwo1zrpIdk3CSUWklqdLf+6ZOLauvAig4WYB3O/urgP+yKonwfMxM6fxxW\no0fWixeEGLQHTUQKL5KV22bWOIY3T441FjDJSbsmD5FSA8UkMyF+zQdvHOS3\nU39mGjoMpOf+knQOR7+1RhV/CqiT0Nq21+H/aCr2s4wYNkjmjCRqcK5JT9dO\nYejrPY23FTgh0THhjzlOnWJDti1G7eno5Y+1ZuhkSei4t9PaiS0L4rBcdfwL\nZUgGLwN8X9zS4MiJk670hBJGva72JA4jPtmA6XB2fvp613ln1WERQ8T0Z+TT\n5DupShXiWIp9bbSkv0raDY3Q1LMnqhZ+xSTn9b0es9FfndqnYlqVQTiHWId7\nXhM1qHZDlqartz1W5nCG654Xzf8rOo8TVfeko7LBeMA5+0Ul+rpZP6j7SyNl\nPk6HuGOuUuNQ+sWe31IlrZHKjhEzIfaYEWGmpMoNDAqnUYPYWDPE6/bnm/ga\n2lY27y0NNR0ZN+HNa3WuDHtUey8IYmjKbLIYtMAybQUitIbrGByzzr3schuQ\nOf5ph7we9esA5M0QCzWIOfwsL/u00MpaGF74MxlrbNYeIlv5KKmJPa7dz+tJ\n9ys7vHih6Z/ViNoT5qglulm8fkHmKISjZJ2KfT5UGo3VHwEQL+7Qp3oz0Sk+\nb9zu\r\n=Ig8t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKfzGlHuOEshtr3DoKG8AIf1vxPb0DMu8pP4wqciFbmAiALlqB0RBwRT4/1LHruXBO3RMFgwfE6twxZ+g186fuX8A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.ea3e82dc.0_1595618482066_0.780910649337222"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.94987b64.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-ripple":"0.18.0-canary.94987b64.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.5511e0aeb.0","@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dVh8nbG4f8eDbIlhVwJ0hOuPgGL12GWhvSpDK8xWWDmkt/aKd93jmGLqAqpme1torQwcHdvWiD2X+GSL2E9c+w==","shasum":"309d9a2a00b80b54ee024021f48dfbde9634eb88","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0P7CRA9TVsSAnZWagAAoxYP/21E9uV0Rclg4KPtbdBQ\nAXnxQf0xBrtLXKd6coGRHKQBsAjer+GKu4gcDRsRHh+AHmfFreAbCyZ2Nerb\nMhZLfZ8eZB4wYvhuozUqvfKVxKhiGJ74mwyb1V7GY7Hv04xob8PyE44Guk2t\n23ET8H097RTpnxBwKcgt534rRv+u+cli9/ZYCzFxQVJJj7uwyPaRZxyCsNLI\noY2G3U0Ifx3nYSKuCmuMwf5RilJHaURsEFCrpazkjumW/EMrEs1zXN6s34TO\nTw7jcj+QKjnmsJUBKkqJtpdipNdGYOcRHOx/Y0C2nVXnhUO85XH2tQSXfmTk\nFXhw/7KL3Ka46IkkFhbdsNXQwewukT6th44M4HBMVeLLoeqoZ5biVup+lVQK\nMArIa2TfgS+PGMK2H1AzZJIYx/fC+YHS0FprsvfQI6H3K3H4efiPi2Z96/KE\nItJgdIs6mxMN1MRpH1IBn7zQo9ifY4fSO/HCrWNdAB1xAbYZf/mlJ7XzIZTU\nqIyqnAZPIA4dp9vumCf1W9s+XcXdmzNgpbOYpTGIOk8+97r+VId6kPDCZlrn\nNMtQxpuRW1zUCs18Xq1hm4/u+lZKhP6kz6yJ4ZNkVwMy5rZxmw1Q+FTlgSRU\nTpLS/i+z/jCnl0Xj51yF5L1yUtbZ4N9DFCIKVt6v29WoWt1I/iVrdsjZx3Je\ns2L+\r\n=KO/4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCvYyjuX32fXLJYeJKbMzoQwZ8nIV6DYZ/9yWK2Fup4AiAovPA3eksgfhx8d080fOxA5vDzoHN/+odSlDDNKBDY8g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.94987b64.0_1595622395017_0.1754935068050949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-ripple":"0.18.0-canary.ff49b7e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oorAQ1QB9BNflc9CMwxLbf0Ad2BQ9DGZRfO91OxmwLsJV6BVvRo0v6zvbWdQYGx8kz8ztasT9S8qffvMrBYVeQ==","shasum":"ca5b79580974b267f39c72b4c34bbfcb32361069","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVUCRA9TVsSAnZWagAAz+cP/3h4sfEvf6NVJc6aGJaL\nOUQ3tapqD3s1SosNxbhEaCz1AIIH9J/83NjvZ04W1hY2bmpL0+UnDWnyJvTI\nDNu8izpQRBKZ0AbtLA1fxku9GQgslpFcNeKb2qZVmoyhhtl78x3GHN5EngLd\nwSr6oKXBssGnhHHMMeESKfPSTaI7GoYbowbDrKgzM30indIb6lUWbKluEbv4\ndFOM93gCM9hxhPaRJhjWgw+CLxXJYAAmtv5kuCA8pVFlMw0RGmiWi5e6xpNU\n3k/RUzprnrTGDrZraFo95x1SSC/NV5YImE3raydZqJy5XvYGrEX6knRp93bX\nK+0mNnc+Y6NFyltrJpCirv0g91z/j2E/mv9x6PtyQECFwmOGTvDWryqjzIXd\ncmshuLx3CaodY0EFY0rJqvzlZKbHyB+8UtzSr4y5UNn9X2YVaymwENBIHYgu\n9J1jBaNLDc/hhYqQxMOLmGf4qV8+HpVuPi100/6tXACIQ1RUQFQM3PsPVWit\nLkKC6myMuzOmqbhRM95xWCkYt/4TSH2FdlJdGkojzT8rTSOQrK6aMFKOT94D\n2CS2qr4VwQoXT+SOAZJw/naeENT/MYLQW+QrgBEtufB5XXFZnUpE4Tnzv4jk\n+Qroa1bQvXU32ADdJ4EcKS63IK4oBKJ+KDT9sWTbXyS+O1Jyx+KrznYn7p6o\nzIhj\r\n=CpRJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3YJKsdjlgkK3KSM8BGLJemWAl0reHWWwkf/7FZZZhcAiEA5cHpxLafmH3DaiMaCazy2wI29ItcpzzYzN7SN+DxpzY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.ff49b7e2.0_1595876692233_0.4968464624127462"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.3d334ccc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-ripple":"0.18.0-canary.3d334ccc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-axa79G659H10N3U8rgT40A5JveNejb7yeugljkk9xYpGDp3DVOiq24dEQVsmalcC07atmPDEoLMPqUp/mXe+KA==","shasum":"89db239d5fc28e8a2151db86cf0c1140e20602d0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8RCRA9TVsSAnZWagAAn7IQAKQrwH/+RAQBW+tlSPi7\nwQOci7rxTYDhUicd07xsZAZY0mhYGowKvCSriTNSvhx/xEc7yvIvs7iwKdGj\nhm/g2QCSdkPhk8lygvqkv/Uep5P4Lsh3sX9JrIQsZL1x/LZpeUiKqgh/sAaQ\nFu8/MSSe4clgbfSCzcx/+mtcdnHamXcqbRqhiXLZSJr8E+RDlGIYO01jTiAG\nL1Q9KIZEA0GEHiXG+zZkHCynMUmKXF9keB9l0zKzVPklzFMGq06pQYIjPzaC\n203o70Mc/pWHkuakbyL0Pbt1SZ7Nh1Y1hD7sQb8NUNtrdVJqxqYtMPcReBAV\n4nPiz8ePwZ/1kePZvx5/hEfA6yY/Y1JlLQ2BD/iluy0YH1vN1qmG6DHMW4/g\nq02Cw4/G5oNZpA+BDBcD4iVsDR4NlQZKxqSeHjyLmFGpOT4oofoy734tnpK7\nlYZHB20R4ZtGj6Du6o+tv7YqTxR6lkF1Q3+OB1Anc8Jti6DyMOF10xq1A8gY\nAuzC/A1OEe6Q7+kzTYoSgqXRLJy63YHPXzpfcbkQR0Ky9+ruXo6PvtqiwQFS\nzd3qyV23TQN6seN/79VwGnyR3JH8LuR3mB1mj4vEHo4T4RZXT8HXSujUeqJd\n6WssppE1U6fWDm2T2/n/DZ7NUuvtAAk2sHzeoLQmXFqia5G7zvuQD+BKsmHo\nSSt6\r\n=tXxd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR/Y204ezOjGqunHYK86mi4iX9qdy6Vn5c/ZVUv0XKPgIgNK0l2E5KOUfRjzLm+G29dH7JjWoikdP7pw5ZWjFrCsY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.3d334ccc.0_1595952913533_0.04362994820291721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.82ac569e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-ripple":"0.18.0-canary.82ac569e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-iOuH2G8pr3AIRCenh3CKgPNS2KWn/H3psgS4lz8jCs5DF90ydwd5MxS3Q1/a8/cbnUwfbMeZOt6BuovvO3gH3g==","shasum":"e1f4fcee56a2dcac541c78d8e0c945ee0275fb1d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGWCRA9TVsSAnZWagAAGy4P/1N3puVVsnSYfCoFysfw\ncZ9oh/2RnrSlsQIr72Fik7XHCaPR9xOc08H0gtCv2vuABaPs/Jucr+JQtigy\n+SqcqPAS/M7KVTf1/+v+YVp0PmxsWmI7t71O612/qGg17zT4iTXE6wCJt0QJ\nZKcnRGgt1TsZvYhbJSRxP1sh0kwiMyrWpG8jAGD4ODu4qRYb59z9kYGbMn90\nmD1Tb8IcI4E/iIeVfMGQJLTypaTO04Eo8NQMcCeehZKhfmuxbzAqLFBMWhMI\nOwnM1DgexmzykxKHFcz9RYB0xdHhlXboa9n9WrRv9UbdtetVLT8ZZ/vzLtyc\nxeR7JjEfNmcn/nCp2J7238gijR8MT5H/tsXMZXcBdratkMptb7UZE+680p4/\nTHqjf9JUTc3wm/CcufRcATUnVEUtqR6smhNYb0Z61LF6iqzoqYVIRvHIJ7Qd\ndghsQl75yQz+Sbtnr9HJQTkfG99snT1fQ+cP05ZCAcS3K4Pupe2PQU9E1MVW\nEyWVN7JK/UZlf3gNB9PYbqI43ZVXbRPK8PcGYNP7ZnNT9YTamql9jJFZoyxg\nEYkVFf+r8kqbgEOdRfl+F6HgO8o1FyxaCSqb6IxNpxcjGKAMYde1TCeBMI2o\nqz3pBa0K3lL5x5Zs9afakde1sevduTfWzqCw+w03U42uNwVg4lA1D5v0jR0O\nqUx0\r\n=nfUz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0fDLta3g6EVnzwQOGRCfA6c7JhVpFRPhZj8zZYik6fwIgJuZncFnv9Hbv/9Acn2uCw/HGC+PW1QLbWggfD7iio6E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.82ac569e.0_1595961750173_0.6883048371478926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.99df7397.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-ripple":"0.18.0-canary.99df7397.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BA9014mYLnjoGYL2NTgU9taIQhUgPvqcv9QN3YT0dJaxM7NGlIq5dcTxw4WJGFewNXAGXjTlM3iscbOP+5rHdQ==","shasum":"a972731b8a81b8f2eca51ae40508ef015fbfb20d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGiCRA9TVsSAnZWagAAz2IQAJ4p/mZhYDk/JvLdwVb7\nWRpcz6S65qi9I+OSsaWAjIG76+BjCmp0H7eW0x1lzvtBz0NF+vto7t1QQY1t\n0Bm+dJyv2Glb8iJcf/GhWEhA8ZncG3br99AhUcXL49pZbf3pcVh07CWtAs5S\n930un6CkmEXepqZ73eJt+pUxjVU5ZHtoOGTjAKJIqUZhoHT8XNtwlfBTQReP\n+1pVT66WWwNoFB3eA4hQIglwR+KuY0OCjF+S3SZdFmz54UtX2NqcySnc9d5P\nBdAP/mgkfNJzKt9RCya/H09p8M2FyUujKX8egS5WRziaaMTUHIomw1oo4vn+\njdRN2eSQzvKKXDuF8I0keOHzTvYjBQKU66DahlA5QM8+nHKKXzF78QMS9aru\nWxpeZTlLeYau2r5pzyzDIjSp9Xuvw36DaD2ykAgICoMiR61lwCq/UrPIwuRW\n0L83AjoPLUU4BQvy1AePSslCfEGAkFJMVwnhLtntiG9hNEb5uu/MAnKVm8Bg\nihCs2u28HjF+YPljqEXd169C9/GGO3NFb81xUcE1wnpOELek3EXGIFKNRMs6\n8a8G1seZAYc+/PBcsePPRoNKmPQOCWYcPAejS0giqc2qxf5Gv/VFQAyuicu7\nLSVip+D+onmdig04utL7rn4wi/V4/BB++IqIltfiB3rIMomMIn3DLrlVzD9S\nkQ9g\r\n=Af73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8cbYcVgflwR8QTReT0YC3cfcLUebnJqjPMGeuSc79PAiEAgRd1ymBmJDChpoECvQMFXNDrX+28EtGufYH8OFoyKPs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.99df7397.0_1595990434281_0.4389757552908107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.45493e05.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-ripple":"0.18.0-canary.45493e05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HkBDPlbBf+vNJ9vaCsLmugSyt5yTbCLzXE1yCxlnf2HdX/gSDqsMef8OBFuvjt60nqiW7xGbBhqWypscDRR/tw==","shasum":"64bf6945040f918cdf6ad1b51205a7239fee37ac","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa75CRA9TVsSAnZWagAAvccP/1LbaHEyb/AcXSN0gIU7\nQx274FZIswIxJXazj0Ktl9U4ovs3LFv2hJfd+l2Qu1dYt0g0oI0C2qw3I1rm\n7LoJFnh4pS1ta0s7+nif3qLPMPtuRaaIse/dSfLCnJptXwbsc8Fr3EH2vaQL\n4GSW56+b//7Brzi9I7aGga42I9sgB/pGKXkoHxPsvwVV6mYpHKRQITLE9ZgL\nItyZiDomEQvFBPrlwAiCPFXdd2fribHCEc89DgUU/oziYE9gEiQcjBkMeL+m\nv1Q72w0JcQuL3u7h3AiBxfdYJzUZKU3aJKKje6C/m1nsnD/cehg3xgJpSLzj\nng00pEBubkdbl8FxPRV3rK8v3Y7xRRqXQP3J9husHHAXQI5jSPti/Zpvuqxs\nE7YIZkcuZs8oaKcvi5XzD5mViyV2T8zYtXTdh9yekeC35BGcQhbRn495cLBb\n6jIWKb1sPPm4jEF/BKrZMlBb7k4gEtq7dzz5WSg7mfdIXunzEUqimFjNOAS/\nsWs6ezOPwzjSy7il/cAO+JwG8Zi4CDzyjhqZ7+THyW2hKbVC6WDmnf711SzW\nHjs62faLCVbLbk2/A1jdPIYB30IuJneYncwizNYUcL+zTpYY8ahmnq0Sg7vN\n84Dfu2KBM4E8aoGNVB2NGLLjYyTsKOwh2BCWF6N8y+CKCTZIF7M4LbLWiS/U\npnwI\r\n=Wa+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCN76AZsfV//RlR3nDqyxLyfNXTzjZ2QkiFWiuRrWAcQIgPBbgmxQQA5AFV4fQ1BWb1K7PRA+z75CWXuXBF2NQ1pY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.45493e05.0_1596043000739_0.9185320110876849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-ripple":"0.18.0-canary.f2ab0a95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GphVgJUqhotCD4Q17g5426ZiQYj7b+OGv/O7E4nfmqUfm+GWWvxyxGvLCZAppBARBKKzsJ1C5b1llZiMPvNhyg==","shasum":"f9f61cff9f9b51bfcd99843e46b0bc2102499f72","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAcCRA9TVsSAnZWagAArkIP/3bnSrqd8B6x6PJNVhRU\n9QtThPg7QBopxoL6RRi1hrVv0/T20zIZxJvHR6Ascx8gdByMfjbsdhapBJqE\natmiT3SOugS9BUAghouzZkenUh5EWXf9r9hJcPJrpMZouDWx8HN7YU/D56ad\nh5KJE93xwcRjzQFe2WhGr+LcLKRIKIenrunfREVnlHeF6VDZI9+HI91vMRHi\nQeEEniXX7ZSotmDHDLp74mRNoEazkPGAqbRuw1ljYYYuIpb+mM9m79GhOqzJ\nsx/yuqc/1KETqpLCTeA7unlEZ31ilBkduCZ3Na+GGDUz3PgndBqA6mE7nuys\nm8VXEpR6Yr+2X+v8cc1t2CPQMKqqE5HWF9hSbQdbpiiD/aN6gBVlr9Zm8rbb\nzJnFSClBtmLWUfHOGH6vg1d6PPsqXM+FBS5b0AhZ+U+0Jb3l+TSgOMnG/KF/\no4BqYuKWtwL0ECs9m+qKbHRy/yVoYZwtqqkkQzgDNFqP8RTYFUXrh25CP1XF\n2+5sGKCqmkLflUuMvjIYhJg+SVdZo8R6OyYGEF6zGMD8O/EvsHUuUh/GbeV2\n3shHC5N9FbhQOlaVZYCJmbYEG9AU6xMgq0+pbVe9+7TsiQK7aWyS03o+CeU0\ni5nQQY1qVeK6IaoqTsRRdO7rv7jfRKJxxG48jCDcVbtri/kshR0fr5fKpkSl\nRQ7d\r\n=nqOR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGD2Zii2Y+on546Nit4dMYCBgwtSyTjXX/z3oSGt/Dj/AiEAlv1W5S6N+GEh6Fp9forV+yyarKi17oaX8ip2TaccI4M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.f2ab0a95.0_1596043292493_0.8593638303184139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.45f9eddc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-ripple":"0.18.0-canary.45f9eddc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Htem/RfGY4je3BdAB1DNwzYb+hA3LpaEx27OqG+MQbPbL/zJUiJ1trArIzCG/kUE2aYo6tmUkO/1y+04rT5l2A==","shasum":"b12eda42280487eee975d0cd7f71fa3de78171dc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpeCRA9TVsSAnZWagAATPwP/Rv7Yvzg250M2oLRqtBv\nqhaoTQqH7I0bHFaCC3gA/CeDuyqIO9kzyoxbUP0QX8BMvQvpxxx3WEUA4IkV\nGBc7w9ws7+3kf7LqkUhTacZB3UEhnc/x3Uzp48Ki4JFsBwRgxbkxyVUQVQk2\narFrpGJwHouUENGtFFRDY3Nd5dhauXe6cfsAcj/7c4k/Pj+d8ajzDVYe9Ow1\n/VLGBQNH/8ED66cyRNsgxQohMB7yBxVqRAKOLY9bh8p8Wh/ZXu+Jp1EzcIdP\ngooaHFduvsux8ARcOSC6HE+Ib5oyuHadTCjoWnKsXFftqTsOVgjCIwPiY2kt\nsMLxbxiR5xCBeoUxhzI7gqyZyELidAy4OqlUGiXDk32mfXF+rgUk7ykBGLAK\nc0YYgOcP5LsWJM9jA/YzoyUyu9A1FdGH/Z/h5NRZ+gXh3Z9G8lS4KvCPtSk7\nCvvvUbChnCW/o3crTuoLovXecySega4+Rl/+/tNL7K2iAzo2XIlV+dFaRSWZ\nvFqSTFLBeH1pp7PP2LuRkrPaLyBJ5B//TtkKRBmlHj8kr8uq0nDO1cOhHSfh\nL0uBhWZxpCLt906FFktRAETJkC9b1fllbN809zPXqs4+LJIoCD99+KUU3Pst\nUnG4Rc1htd/SxdE8Bl9aNNJ3hx2yNzxgbc3kR47z4WOZAGZ0FyVneNwSZBB7\nLmPl\r\n=SuTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5Q/OYjmXEw0WbpZhzzuTzSu+b3EYIV9Zf23PKsGSPuAiBTigL8nlankqwx5/JFHMnTv+gKSCpaL4Gey7eQL5x1ww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.45f9eddc.0_1596070494365_0.005524670197579518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.b64663ea.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-ripple":"0.18.0-canary.b64663ea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P+6GG9vTUyvZeTflPJ3nONd/FI0h38Vl+HVMicYMJ2wSUAl0RTSHvC7Xqd3Q/fddbuY9d3RA83VrX1r5mK1nYg==","shasum":"3f1f69c297fa7345991e52bb4c1aaf0de79963a1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwa0CRA9TVsSAnZWagAAfZIP/ifPFC0RtpdwVfbk9cQc\nzc5OlXgF52jh0oYuu2mTWLfZNmNkCliHYx4zSgOzFU+fAnRhkrJHUnBHzir4\nF6U5J+ngkdEHBOtMEqL74iAD2bhG+YlXmQoDM9JWA1CG9Trn5gKTHpexnqtS\nHQDjRi/JQk2kCqYp4R3WJQd9v6JKczVY5YRwPtdIqWYwxzMkEDjqE0BcBWJh\nxa3kNzijLycUmbLFNENIKZE64XpLDBs8xE93oaPvyblwahUNTydE3CtFBitR\nKCQh7phVYG8Sm3MHajfZ6ke67RXfF14TnjT6zNL53SfZ3Hvz8HuX+QUKNtIO\n4gyZYppwKmxVA+qEAfqSVsonD72B1/7gz/mN0NC7qujt+GR2+vAmLJhMudPi\nkNrq31YsJs9JHBxGFbPVp9y01jTEABOrkqA1Jo5OuPitn+tvZMRrlzkueX5N\nsh+yojtoJmzNqcbyTuicn2wXHIcLZUJ09yojRG2mkZ4uBW2t0s2R/I7T7aGd\nd0URQG/TLTsaK8EjGvnKZbydx7ITG8kK7aJg3EKoi03q+MiSD3I/2HL72CaH\nQi9TzfvGzPmLyG3RHkrhPHqjiPHcQL+uIORLag71mvYRl79uj0gjzAZOJVYq\n6DY0bnhf3ae7riubDhYGBKi0kA2B6ZOhkOdcKh07t5pOzI+vXA7VG6hMk3Kf\ne49k\r\n=bIZi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbqz2n3IYCoe4Dk/Az/vGnRN2tBXpu9aTVELy871GMcwIgFEYjOnWt7mLzRPHm4s3dIN+UWN9H7BdbYCqNx6if6hQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.b64663ea.0_1596130996007_0.22120540177885606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-ripple":"0.18.0-canary.9a1a4d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-chEimtxD2bOBJlVa0DFPzjipr6q//CS3vNBhAv6MMvb9LNQLAeLIvpcLg/DEyY44bKABtcYo5kBhNIN2YBY5zQ==","shasum":"cf0343b14368e8ceb11a7fca0684cd9013b4ce3c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXNCRA9TVsSAnZWagAAtTIP/2fmwscrt3anyyIE300T\nFLWtFib/Wp0R6sEJ+oTnSjeHMRU2vAj4kvhZvifkQrW+EApbgU5uvhMk5313\n2sKA1lCec94l4FUYcBzYFEUciG6VLNJr0cR+dayfCx2z3lAEjSdxcd3tSMaI\ndKv0tY77t/KIWdYLKbjijqwigXSd0wqgc758lbqFgv/P5LqYQ6B2EkTIVpQ1\nax8UdlNayILhjN87RAkh8b8Gso0pMA1fytXAnsdM1iexDrkN55SzKF+jz5gy\nkQDEyGuh5fzQeTdrYqI8qvM/aiVphOPmlZ8xlsxZ9HzvphBB5T5mrxJaWHvz\nsNTI4XkEy1W9ZAresPam9mQp9xD0z7VDQMH49a97ZqUbmuAB+UEcw+VGfIhX\nAlMkmQFCklJ8Rdg1GTXlMVe1VvCwvfpmr7iEIcWpZYDbPjcl6oYLK8KMkQAc\nNzeWp55tq/hKLxwAHFlugcZ9OnARKI0zOX5I2m/gSGYPBimFYQ0a5gJdb7VB\nUwEYCzv0tXTRKEvMSIKi0DPikr8HYrLZOovxU8YTV5tatkwBX6IQR/XuiH8C\nQhYfDSyhAzrH1B7w7Vc/fOR7IdTAVsnYoo/LrRFsJBMG9RH867JpLjXSLMjc\no8Yz420wys93BFwUb3K8c34C+IVUGmUmUTMfM5UZYsxucABdIK7dOCcEpaQa\nzn8R\r\n=gViY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEoW0TdM28OTDv8GC7KQ0/hntKD4scay9yMNEjXZ2UBgIhAOt4kccY/ZuUBWy1Tb1C/h4a0SXfMn0IUN4oQa5oo679"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.9a1a4d2d.0_1596143053507_0.003571440882433441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.887c2848.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-ripple":"0.18.0-canary.887c2848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UQHd2w9Nx5WJaFqAUoeZMwG6MHq5dhbUEzhaaKKNIEEq5d2JTEcjMHM2km6qDTPUaFgvb53Yx6C5VDIkRFEqOg==","shasum":"9ba72782ce350b0a842581d3e6a6644c6d322d8b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QvCRA9TVsSAnZWagAApYcP/Rl+uVxVzPVWkiau5j2I\n2+eQves0WMF6hELuZztdM+NlbLwcs8hzlJF/JBwXRhxAb9zidGX/toKQ+ghb\nhzMIealn9JI4Q8YZChPCISV6j3NAEoOO4SJXXo2qufvnVu1/+aKllFy3XjOc\nvoKng+NhJgokJEZHUrRS1X6S9qXMHGK+JA0CiMfRYjdTjjJxQWEhmwxjZmcm\nXPXINuyGrBzSe3ql/EAAw6JPhq5gakqdLeNHr3nvir0t5WtUhQHp0SXVlYMo\n2c4eEU7M1UJOSlQGMgRyzo3LEutIkVWFD0ztwlXj1hBLYlsYNsul2IENkSAr\njQJ4QqvdMzpYvh1VJuTO+YZ4QlGE1PtjlSWCvRnvUfm1SuOLtabfS1ZLDyig\n9GlKjr/BJfeoN83a8ujB81dlUgdNYaeO4vrj4EqJuv5/r28Rn/IEKwDyFpsf\n2bJolJSgpLkCA47bBGCHRYF0mHGerJ52InsvEHYQr3/TgaAQ7apgu9vjwzVZ\noRTArpzBkZbi2v+zGVj0vPG2pPqznH90VHmYciRaqp0UdcEgvPlfD6N7eeGK\ny6Pfx8Sz2TE4UsSJ7XU3awYH5Ru5QLG1QEZ1vcGUgHb3jHdC3iHSZNlafkxP\nmMPf2xxio8Dp8c+EFMEf3eLRhppkxa7xiYX3II+KWl/lcpC67bvOhM844xb0\nyhtE\r\n=ZwBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmEajgJrDjY7je4qMZ3XWIifwN/pdS44ssZU+sgD6EawIgTRT7q6joEIMghIXRha2P6TrNHHE3VZ6LVJS7EOUgB0Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.887c2848.0_1596146735349_0.7979738304527615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.354eb695.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-ripple":"0.18.0-canary.354eb695.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lMeHDGLvuHvFSf9UYFlR2Ys8fLmeXMQnHI512ubrcN2bDyjevpa+uh+8gZ2naQkfeLHgw4S7P3WiHVm/0jR/3Q==","shasum":"1477f9c7b71ec2634aa1c9f62a6781f2b93363d9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":107271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16DCRA9TVsSAnZWagAAZJQP/2GoaPLoBC/2dz2lLlaf\n/597iTzaFy0wUfmCzuk4UXcrNl566E5apo8aKZwTCBBtNt2AXK05hNrVAICV\n4UWM+RnndGH9k+jOky8TqcVmXpyOXxcCN7jhXF/WRztwZ+i1tEFAHvU0TcRY\nixvcghsO7QfvrqsTz6CqNLQThERxIYwgJbIM+oCxgKTFTwR88PmxfcjrfYt9\ng+HdyRSpiQmR75xeSjd5QXh2VN/s480kAlYxVsd24oVqXFwdDZRV5YNXqW9I\nOO6d1xNUK4bV0M0s6cdYwD+4Q/ahE69oLOCNGhDK7lS2HPeoqpG08EEwpaBW\no4jGwU44nj80P8Tk6y0Gl71rgTIYphm+hKBVy/ByyMCrppRhj8XLPemSvT3S\n5v7xo7H8miJ2mAjFfAj91KW3s6SBDCKq0Xw/svvHlLQz11llrtWGCN+W4kTR\nhUkiAYJkzT3UZajy+Y8vaHHugb8YEIE/q6ZwMoCIFT6CuKYHPKHjAxfR5jc3\n53C5sBeJjtx9SemiWOIHC9dlyRKq6A6XInLxYLlsJyPBID1RzgGkCRJ/P5sI\noPYbusKxXS3UbSzz4xyjbY4H4VM6BnU3fyWOFbuIvcQW5htNDHFAmoTNDKQ1\n+LzqG1+2M6OwRCS+egxJy3s0BMZ7VV+DCSS01SFWq8S8L4YC2U9otKGDOi+X\nftPk\r\n=0om1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZCz6uIBOnLF2g4kCnx9la4ncvcAmhp3Ez1ux1iynqugIhAMA8zOMTK1Z/sf1wTF6NjTxM131nNxGzxfd+g/huszKm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.354eb695.0_1596153474726_0.06518130238404019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.7beb236c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-ripple":"0.18.0-canary.7beb236c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iVV4BS8WIxdyZ956mMYcwEJNY2BIkePa/4OucXmc1yo5oaolPAeOdH72B4hn+rgipzNZlXGqKS2KIcttp8elyw==","shasum":"7b8aa576b3724cee8e17c7492be38fba1e65836b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":107776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeRCRA9TVsSAnZWagAAspoP/RPbJPw6Reczd+IyAlrx\nIY66zgQKMCr+KlaK4iQ/MIn4z3+a2tMZxtJrT0jD4YVUr3Y10dRNV+PlNxBh\nu6/kpi0Cthsqx5erl4+OS6hyDm2/jWfp4qDHAnOdrD62KoJVlHyvXa5CAtkh\nIjyZV8X0bsaSxMcRM9JIhjiHQkUnJw12BA65q24K4HvUHY0GttPHgwLkqv9/\nl1sTEyzQjawqfqsaYX/IsE1xuHrt/hrLwGwf1i3yrNq3+7Ep7/VjXoIxc7xP\nPJD46V264ytWTdXJ1/Sa0D1YTsF3PTAP4INSinkb+1qDG0h0lLOVlubNGx9Y\n2lZfTagD7P7rh1JD49UT2FaIA3HDjMzUzjZGcTITSgD54ZahMM48eW+s5YnP\nOUMEY/dUhHyxQepcOuxCmS5afXBHoWLJO7VtO3tJZu/8wRRaOnC1Zf+6NgBy\nz6pgM8JucM7ofEzTZjUTZQqMCYVa7KpkzJxjtkyY7zRuZYr1QkmQfqpBEZkP\nW8qK5h3I3blQjt5YqYVFZuX1pVAx9rj1GM8nzuWJpWhuuxbuMNrux+rE0oF1\nzKb6e/RxQmG1hqMI8ZVvb9CA9ebZWl5VcAdmjuqrEyMuHvoKwHm2oE+yBbe/\nMaKbFC67AfbrkkKBH32CM+7lQ3PpQNSuQIOixA+UfcmxMmlPDjIsgBeTT2TP\nFdEe\r\n=vF86\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/bLotQ8WBa5SFgRA+YFw186iZ4e0xgh9IWb5mmzgCTQIhAIUy4OQWIrJUprbYmkCBE/XzStErnjkTJ0+yy9XKHDSO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.7beb236c.0_1596217233291_0.5117782158447342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.c44acc0c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-ripple":"0.18.0-canary.c44acc0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Era9zJFH+Fy+RQTR4HPGPsoYlxljzdQsRWLMlWBOm+cbynWz8/DeQ6svIUFscyg9ICoNov8Gg52iGwSa75+cbw==","shasum":"87bfbe406ebedcddcada854b144060c831ef88c9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":107776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjtCRA9TVsSAnZWagAAK+IP/j2j8Vh+HAI9IfEujJj8\nfCiG31Q/BjHXADfqRE5HieqHpjnJaQHMypyecnjR7tzB9t/+y+TffDm8zuMC\nljTgZS+wvsaXKUqrvAjZ+jYequ7UMbt4/XVzE+M1XBRPBl+UI2j5hCa7BbPu\n5ziWQgs+QXccgyaVSPsE2t9mW/QLvSJXmmvO9WML3ZlduH5/Lix9Mn6KgCpD\nTDT7CKvpEgHjGocmJHG+1ebfqSc+nD523aNCw5uonYy834tNnuaCudNhFs79\niWWXIu2YEAzDBaBbWRtRFMHx/E9zURyLZg2G5cbGZryNRzdlFppQzJOuMxpt\nzXrNU1I2cuZc+xNV5nX6peXBHHHyD74oWCVl3RNVVtAdkmPuw59WONGSPM5C\n32/KKd82nHdsqKNnknD5hJ8/DXmV7XmsJNiR9NiZ2Zk4Nq8KgDMruoI1eRGm\nSFmrtKKHDFsWb5bjkKCbPZyMPCpXGcNvCC2TkCzXTG7Dc1+BuemksfG2xs2Y\n8Ne8Ze0T9dQu5z53aLUhY0G5mi9G6dnHC3VXsoywiGXeTLFtA4SRGiGZIxjE\nghEK9wZIu4IBrMsaHkHCtgjnfoC1l8LBBwRCSlXMWv5yaybW8+3ITLhuag61\n+rqF7/UDqRVuTS2AYeDyLumhgKEGqP+yEA04e4yPG6vkDffM+6lP+jmxD+mC\nn478\r\n=eP2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6FUTnFWbqGTB9eP5VlvILYR/w2G/uWeJt9CM3my9lzAIgClm9Vf5Q2XhZv26G3aR0YVtFJFECxZ58r5gGUQS20vE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.c44acc0c.0_1596229868640_0.07305257868040971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.779853ff.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-ripple":"0.18.0-canary.779853ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fm4iP7+Yb3wxG/J+OBfW3zBa1MdPbaEZOlB/ATafjlKklCEwKLoXDDSa/1IPfifMbEQ37PxtNEOMqDtz9aeeuA==","shasum":"4fbe8638ff36c662a11708d77f36d8f5d3a074f2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":107776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgPCRA9TVsSAnZWagAA1fAQAI4FAZtUscpo/bUrytHa\nuCERuOp+mb7NpwHPLgkescCQ3MZEIyP+BhlEMIy8WedcdfOkmo1onriSwuFY\nsDIHXmN2AlRWGczwLeLzH0y4UAYmDyzkPWz52E08fUv2rttDqe5EMNwTwqjr\nqOL5jSLygXV3dGXC5PnQ+ZGgnBNLVfoePbK6wrbaJ0Qjc1NeRHUdwhRdzeyQ\nKqTYARH6KB/Sar5x9y4kqMLM67vGtgyAFI8HZUDgQd/YMHQ8BNJR6/yd5V4+\n32QZX4aSaDuF0j8ocwYfrhOWacPDRS79EmvjecefqQ1B54rhQomxL42wjAK0\niEFUS8pdXdIaoGNHl3mjs5pp+gArvmBo7uRQ8HdTsnWH1GUGPi2gZeAAFUGL\nPj8ooXaKAGC5aa/ZKS7rL2RyB+YSd61Rktk1o0ByrrkjrglZkJKzgr/eN4xr\n/vA0Nm3+Miq1NhG1SoaO1UN26eRaqStR6nnIIpqAItyAQL9p2j4BZ2WtyUnW\nQY+wZ65i3AQ4tdnWf9+Yq9cIatyT5Cj9y3GW5KoYubGANprbIFZJFhFAL9Ys\nwiAxnrnInLlbUOWVYD+XSkLn0c4LOb+8c9h5zpgGGFNAS4aLu3//ELyRaXUQ\nm+gpev/qOUW/Oil2PvxRo6955wI9G2uG4X3r8GKLOT5ZsgoiHBgPyB10rA5N\nbV6Y\r\n=3S+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1lADnvALtn3np+Ty0PpWxsRvrCoeqv+6KEFIscgeaEAiBDzRWWrOMQu84WZoh/7p+hAO5HMe87JgVJPjtHyPrQnQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.779853ff.0_1596475406670_0.11159533026854884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.8aaf270b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-ripple":"0.18.0-canary.8aaf270b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tQAYlo84QWnDdKojyoF+KKr8E3Ol0Fld3TTbHSMkww+um0Kk7ZP1Vh5j2s1yAtf9DJme6oBrx+rKsS2s0eLG9A==","shasum":"42da6ab07e0542a14a6fceeae11bc35be7cdd98d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFouCRA9TVsSAnZWagAAdwsP/0wS51XEhOs/UTeABfmA\ntPXcMIzZYJSsl/kzcw8Ri/JENfgErzb6a8rpum1HkGOaakf7jZaSbR7zzTW7\nwQ8pVXm1QYaElQTlIw/3ZOcTzHtfnLAUYrBoQdi4jOeDtTilRo8yNQwOmHNF\nAyD66cJSQwxFkQuzsdgU/23umcxi+uZkVqrQjgYjWIygMnAirwG+/iYbMeWg\nqf5wn4AwInw7AmzSLkfqZ/CMq5C74CK0r3E4tkAOGTazbLaOki7qctb3KY2I\nigt5NXP4uet0cE8u0y5LMsOQ2A+zMCSUXH3kiHVL6UTX5PD6sXl4N4BqOf72\nkBP2I0YJhDEURE9QXKuRfVAgGajBNPCLi38THw94JJFgL6hNWY4t8UjxMiqj\not82u+zWGLdn54JZjkzoz/GV4V7dAJwYnsUwra4oEgff/6EX4Lv33vjWr07c\nF8jkVanzGoyEVPlvrn8mi3Tk1ThiO7+0NrTEYKKGPIagKi7lfFTtmA0tUOUc\nLSb8WL4GdtlLCwxb9oZdh6zGjiP2tGe76fcq5sxX0cpjJnk4jdgYgtX/vWZV\n61gVdpClmDtlKF0YD5NRkeZFegIj1EfgD6//iGZT48prigW/TSHd9dIAc7jU\nClsgTAGMC0oggGudAjEplcXklZhI607z47dUZMUwptBa4Re24ZDMA+rzUvZY\nN9FK\r\n=UpCU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLtmu8qIDIamzGN+OSPJkNC3sMgt9DVrFopXFT63WchAIgT1sAXALEk0hBRJgi0FodqG0MHo6cPW1SdivURvf7NYE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.8aaf270b.0_1596480045998_0.24857129071673545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.5cde9f12.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-ripple":"0.18.0-canary.5cde9f12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.5903d39af.0","@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-72MFR27bfUSL5MHxWlIpZ9ZC3eN7mwzmTM6lLyB9wp8PqUWrd4isbYrWUKLFCY8Ymf85fozxELNbIjKcB3kIlA==","shasum":"3379ffe40b4e1ff8ab85c79ab1e5e21c444c72ac","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF70CRA9TVsSAnZWagAAOSUP/jdm/wuiWtwtDNK6gi4I\nVQ7hrCt3TB+W+W4CumUFNKJ+3/ErWevEkQzkZM8SmM/p/2ty0qTu14WxdBrz\nbE+TKnzvVvn1O1S4ih6crr0GxGj7VFAkkFwoPDzQhCxZMsjrnCw2IywVyboK\ntHqNrBOczjv7jSrNqpjE25EXlsr78Y+b4FBeBiglqIo4GFgvBw+TUJz8kquR\nB1dbbVuSNybrwSeRkJlE3s2gaq+DVKyI02dKXIK/r1RBBQUQlCeLl4I0P1XE\nlW2n/liU8BRIcSoLjbyMiujtimkwJNkv1110wGbxMkqeWr2OliwUC6dObHzo\nr8x0ESmqLb8NnnrwypYAjcrr6cVvuV7mMt0ETi2k+8IlSNVqBEFI2YMdXEAF\nUi3cuslkeG4cimV/QeJzaMQZ3bE6lA6MAGnrSRT0ZlIOLFyWZ4Cs49wcRjEV\nx/D7WcDOtSMGR1uzMVP1HwpYsOUNMQGW9Os13hyOr9H/wx/t8JQSwOaUeveC\nSBDUWPWj5ixhigJRTxQ3WwfWTy5InPG93cuMRsikkFXcwtD5NER3H9yilL66\n7piU352Lgyqz8zRnVGboRQv97t09Gg2qUQlZbs3UDBt0fc6zzbSaNq5hl1/p\nI3oiaWRNLgpTgeecUxu63bD11xt58hDBkKYKwBhpus1OlDEv36Jta55Qbo9c\nTrqB\r\n=3XHF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbmXSkOTm7vVaY4JaFBIGYFtaDvCrH8kBfsEC76H0eGgIgWKWx0b0hHSWZakpY8wuXeAd2bF9vJucRGhSUIWgl4os="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.5cde9f12.0_1596481267903_0.7207681664967274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.1607ec53.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-ripple":"0.18.0-canary.1607ec53.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5gSYV9xr0TyAQVQ0YDXgOvDU2R3a3ZhcA2XJ6ygW6CW5n2oQr4HP94CkO4FLSIsCKiibdN3iXy5ytg6ZPsSCSA==","shasum":"0ad078f13b4ec2b58ebd9e76b7dd047ef40d69bf","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmmCRA9TVsSAnZWagAAVkIQAJMWnDe1bAUmi8VlP7/k\nRjvlL3MsQ+COlG4r+ftqJmuMHEcxqjjzWTz+RO02H+H3YR5I3aznwqWvgjku\n+EpkfX3C0WSDpQyDM7liZu/MtT19k8nn/4du3Yut3gV+2XV0h1xRY+IHpd4O\n81BBKHna1j49enrCvQZ+NaytnR0SCPE1NMsckIrk1Eo7HclOSMDUhRB+j+rv\nTtx6mL2ssLKUGmPWiIbuXLzNglKIPdBqXw26vUDpx+7XyQA65SsUMZGncQ+g\nwJg+iKmqQqPlKw2QQNOJGzM38W298ovczuTNpLWJN1kwZxPj4xpCVGk89P8F\n54dJClTcD++QFVtORF+VTMQr+KIioX2fdsB/JR9Eh2e+miXp1GPO+kzmKIsG\nogelosu/2DLJ2r6BKE4jp6yaktw/d1ApyIQK8fw6938V7pXfAwUfbP/r1bTR\nAsgl1nUg+gMJaO5c+s3A89AlRum8oHPjhc/EG0sg8n2Utamv7roI5eB8Yjis\ngJT9z9Wc2RcZlqVpn7ml7t91zlfwjFX2ul5dRJoRn8KcmblW0o8rWMGXWbc2\nsNOgrdOFtWnGUVvu5OELYBDcCVf8kiNJpo3I2ioDeg38ct6DdpkmBiaDN1e8\nuEeyz7II0IID0NWVU0oX4fRoy7b543N/CwbcwO9+b1LUG2iVItCVkY4xAL2h\nJxbn\r\n=uJC7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoGlDPPMpYsaVEL/4k9eQt9lhU80iGR3/46Q3D63cOyAiEAyK4a2VzUGujSajJxkPFkYAsDVOWJm32GD4Wd8URkJG0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.1607ec53.0_1596484005861_0.40901484717618297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.678b30e3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-ripple":"0.18.0-canary.678b30e3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-V2Fgtb8yh8/yc7vEyHB+wOiIndyxcHmBMooe/vIuXT03KdaW8yx+IAjW0Q4KIhcu8sF8eG1HIKPsyY8JPAbVVA==","shasum":"c9db9a9a9daa8b1786761b7942aa7be0690b9ede","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqMCRA9TVsSAnZWagAAKkIQAJmCQ4f6aiw2MAuCaWLH\nxH5lIuqTVgQNjPXDG7wVkzm71nu6uDNASPou7pDxsDVqxFglx0yP8ftRuUc4\nmDZUYRVRLwE9kk07QW+Y/bZSMYDHepjXVOR+jTnNdg95cHHyYUGoG+7qupa/\nE3t8fFu8AVOHHnaqLURT6GoTpZXr9PZ6ypuRBIOi/7tQQOhtU8HV448VtuYB\nkI3jqhxB3Rl2LKIhWIuIbYtcg+tYuW6CMKhP2hLyt3WhBKYa9s8Clj8WlPj/\nVxifSZm06Mv+lTfrQ/d+B0vIMc7PpfV18XSXU58mbyFnhLaSFxCmUiWn35GJ\n9jXzOkuRu0zkfB7r8/oan/JEEMFlJN5BszRd90xPHnw/7kbuY9G5DYf6YGCi\noHah3UEI9fHMH+kzpMLT7lgF4YYHr5DAccCtsiU4J47KnzGCQLYQDfsVMcb6\nobSKNw26El5PqD86quNKyHqC7EAyO9YGKbOYdrjt/kNBHhoD0TNC/Px2K2QJ\namGOC9y4MTCvQKcpBmuyOZyHyBxzHyHjhq5rDPr0FlYBciYsBiDCIizZbp5g\nCAsMtLZ7UesxSnlKfOyF1VIXKgcXDHvK4ay1mYf6d/UxCPRnZz6B6CbHG1oJ\n8ZL2QZNgJi3VvVIfZvBtg+hrHlx4dmGoaeudxvJvxqOxJujnHjTiMa1fwtb/\nTzAh\r\n=lWjF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClxkIiXkaHbSN8p2KSGsdtn3Xu7t6abz1m4Loj0HBMJQIgehaGDPpxMotnp6BebASHkm4SWCDQxCIr8R9BK8Y24Ls="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.678b30e3.0_1596484235605_0.005261198274943979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-checkbox","version":"0.18.0-canary.21c55569.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-ripple":"0.18.0-canary.21c55569.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bbtWz5HpqZtR/wjrN6ySKh0AcULWYxzZ4j2XQq/a5nYIJUHzbQEcvBPuwY7RYTJ+fbYJ5QWGqMNjrYuDveBG5A==","shasum":"0ad9c49ebe0c669c0b11c355dc090cc3b2ac0737","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGv5CRA9TVsSAnZWagAAWc4P/1jxUuLyHueJmbdJQDRe\noVQkyDCa6X2OlwumvHs5vl3D9COVPwbErn7CTMMlOTRL9pXwCmV7gICH+XTM\n8+xSnv8UF3LqCakvdvEy+SJIPQl/pJA3/yZlk1VmV04T/ao3/5egnyZ5OVnT\nPOgeUCDPlFPJCP4ucojVNjmsfn0mD5gOvDtmhETAzN3a1sQwTt/TibAltFXf\nQBS0tW+tYKO+RfH54KcrXpI1Bmz/sCS5MHm1DRgT+goVQPtOmV5PnqoWO8EZ\nPivsyKYgJVycZuUK67jtnMt4IxPHEb29/3dHqhOWUs3yg3yJXgYfhjy1tkz/\ndq/8qmpt6VHzhn5I01HNvu8GAfCwmUUiu/KKtZfnMuBGm9BgYNqkXSX5stb1\njcEPsGnQzLUVLx+7wDtjyQ89e0PwvlRII4PlRxZbofHF3qY8P+LjPfV73vPn\nKaaIkSI1D0udncInM7RS/DngllVZuWZYu4b6KDSF10BdCo5qmKy3z0J963mU\ncN3a4iFOR2nOZ0MtgubwKtpAY4s3VpPCwFLuOE6a6QDlANuHiL0p9OhxV/wd\n0qATc5MbtiW01ncu2WEPiVx3wEi2NwpOHCfIOCW9guRgjzTYMN02sVBEMTXr\naievDONAxFxq/5k5e6E7Mw+ClC61EmUTqKdR/Z/37P/ESd+u1pBfNa2IeHy/\nSFxV\r\n=hGjs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFogLYU+CZwZzWP2oDlI7QEQ1h5DOJse2qMi7iBktQS2AiBmtXhS74EIJpGzv/8P+pB5k/UiiPYbhgxdxgcOV9uzKg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0-canary.21c55569.0_1596484600949_0.26014380925766245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.907d4d7d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-ripple":"0.19.0-canary.907d4d7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hfBiLgbj4w49PuQzlXv+u+DGgnrwADRTOy6Ol5ijAiSkDq4pCKckL64rvutsZKYTSfpVwEiXyEIVaaYkbqhZQg==","shasum":"a4615a89ef98fe43d3e54feda6c4931e7052ac80","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIARCRA9TVsSAnZWagAAVhQP/jwzmXGXm1CeImtYitMV\nDPdZqCoXOEPPNx9r1+7EEJSh7OBqbqNghVIUZNOqmL4LXPiI7S3cQu3bo64a\n0ZYaceyX8FhhccTeH948vW4Oh5MsNKLo/h14DXZxM8p8LCqRN6RO9bJi6D18\nBV3D4/C3tv1A9tEm5ORj8Lt9nD60tYzHnsUKX/MR8xnECISFv/w4TGQZVETL\nMcgH4uA73LDrlZOhNdz99zMNkC4hl66R1uiZWbo+et6T5TdVK9uc4K0L5bZL\nni/2PVMJvVJxYbrsCLURgMsmHJuyl0rTlttbr78YBBIq53ecKcVE3VmWwWA7\nZZmQI90GoBE2meCz4CfHenowkixCpAsrxATq3uW09TA/Z6aytTuWvn1e02Br\naE4uANUYmJzhhKemWDdYslfP8yCItMB8GMWPJULaxHgY/RJrAgp2Lbblf30O\nEkzodljnvnCkpI8LpflTdS29Shn2Kc6GnKCRVXeexiP2MaxvFGRxhr34Lu9b\nLWawO6htKImFasxYM7UNq68XJI10a78u7ddwExNNYlNkAQe9b2WxTJ5zyDxK\nK0wAkJsGzZ1rtQL5rGfa1BeOkFRzd8dpu0Kf6ShijcfrBWMgIk4Nk5UIFFzY\nK7OJpqGZftU9sfICajGiMcH1aP+NSP7hRXWyshR+SeCoOMbp3v3xnaFRTtRZ\npQoU\r\n=N2Ny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5MLjfQHGIniUKl2srfCN4bTsXn/o+aG1p88+c9+mpAQIgSN0AQPPn9z907cYq2v4l5KLm4PW58arwxKdfIRB2Eu8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.907d4d7d.0_1596489744832_0.9866969087468747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-checkbox","version":"0.18.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/mwc-ripple":"^0.18.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-+KAt+0x8SGMAeSyqU9Kw/gmCpualxthVGWf5p38dFSLJPt5NORo+yH3AF4FdkvOlK/pYFRg+ZpfxiHEGCSq+ig==","shasum":"88a0d7a9511dfef621334ab54cbf1a22a9bc3f4b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.18.0.tgz","fileCount":16,"unpackedSize":107922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICGCRA9TVsSAnZWagAAPmQP/RJUZ5Rx33AnOsG9HYTp\n0anm6P03SiD4oa9amvdPy2mL+AOePA5mGKKnfU+/PfVSY7kdrcT7C5g/eTbV\n8bIu2wOWEGYTJ5uF9h78HpXRJouKkrXF4w+7e5Ff79RvzbtGosrZq5SlhkBb\nRDc+yLbXFnV7HlwL5uEk+q6a9A1lA0cCFGPUvfRzEKX4eSDHEGgBk01pSaiI\nzuXJdLZIoNPELHXIecwzaGK3L24aokZNBoZ9NfFtgBm26n00tz3frfldZ2/a\nnV4921pbqkzv6VG04bKWgDShG2MKZlFsDdz7Go1MPHaxlvCkZ/mmKn9yS87S\ng1/rWnKk6igvIfpRl9CYg3jsyA6Gs7fpZdZAd9ywsvhuQMp+GtvrG/rH+zxa\nUduCw33HbXn64yvKdzOwo3jSndP2tPw05vIxXu9n6qfOd8VBzJERwTud+evz\nKz4TMfT5eJn0elkEEGdBcxYFvK4YQ0WrHL12JHrkGN0iOptrVc1+p3XDFx39\nH9j7PqwFau9epCcvOZ+BI+fVHB94NjZonzqQDH4NrB9UL28b6IaRaG7N9NDQ\noI4+xFEKM1kk7l+xALksEBC2Vc2Dt5ZxtykxR2dqm8OncuhmI8+mLpSgcLMg\nJd4elt+RamHFaJiO0slLpvWa8ZhgrBf/P7j27o4zq2bbpNzATuL1UbKL87oE\nCtnq\r\n=BpmZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL0pRACMMtxZtqOUOv2KWA0cgNVBU+QBlu25EgR7inxwIhAPjSzawVgtxOpW+PHfXr+7DJYMp5TitXl7VpRLmpFX1A"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.18.0_1596489862340_0.5051091975701572"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.f7958e4a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-ripple":"0.19.0-canary.f7958e4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-C/ETQXIIKV96Ws2CF2QQCw7G29pMIabnuROQ7DnHGRkTtJKGsygW2U9rumTlekabMMtk+sJMkBLcHRp3W+AnBw==","shasum":"23c9b666069f134ad9facd47775452036ea24494","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMK/CRA9TVsSAnZWagAAOKsQAJdeOmayin7PSPEkCgPa\nveqkCsjI5xL15MJXPONJbUX9qJeeO4Yp60E9XFurI8+/QK1vveR8xJLwAYv7\nIaUKeafUAtESlZuBRoLhgYtuiUeQFPCJLRrq0ZIPv0IndqgrTtHN5SGSkNeX\nRMN040/Spk299y51nSHXW38Tab0uSFIz0LtLmhAJJ11u0e/H7XKjT9ayEew2\nAfUFRuN9jVKzllYfrZGJfVy5mnBNKXswEVPzkF7yIHBCMETXG0ovOKcgjlCP\nmqtdO61u7kh5igu0inSFYE4EtBFxPv+mm9w12J8aHOoKWDPPuOnrYmAN/lzM\nOsNcOVoDaYaBfcLEvJQ9ozDxl+FS65nuS7+cBiLSlWQdsGcpXAtScn7EI7DK\nhPW834PjssMfxgoXVukjEvJaFsC76R4+wBO/Zdcz7xpTKhCVQwmSuKjjXmzg\nDuXVJFsj4wMmZle0UZvdWOZc1NIhNJkvWGPeL1sFdD2zBUX54y0G/uHfx0AZ\nH1rmjJV4OwHz1NwiAHankNhCTtDpEIdhNkZWqFXQEvxxGKm6smbAhin3RP9c\nzaRB79szuOQ1AIE5T1mSo4cd7q/t4xwzsxBdTqijPw5qAnlIY/VT9e8fNotU\nL9dqD9h8KMTcVS99QUsWF9/9LllJ3c8VL63RxuPfnpA3SItsOBAZCKTsXMv5\nmgdV\r\n=nsN5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxIO2N3iCWOIS1DOr+eBHCcLzfvRqRdqb5rQXpS4zEpAiEAqfVpcpnjBHB3k1ZDz1A0LLFDqyzSBtajTF9cmuzGi3o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.f7958e4a.0_1596506814871_0.1551337234504413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-ripple":"0.19.0-canary.f8ceaf79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UOhcQDMIO1gyvqlmwOwEUPLtk+ZfTF8gMxPOAg6QRj2tRaYcoYrXh/1O3a/NYbR6LEapU3kd7GPJOiNCo/W7lw==","shasum":"bd1c04ed1db5a177cc7bd2dc91e9cccdc5143d9b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRxCRA9TVsSAnZWagAATCcP+QDSnDsBtnMxFGK1N2uf\nkDevYGMRrL0cKub0oEt4n8xF0UoUFmY4K7X4fMyeeAH3R1SWj78UKcpVZI5b\nncVivVIqonBTs5vCzcs4qqMoWlzRbApMCAJjwP3T68zR0nq1n4pccRI6yWKK\nHr192XVAIGWU0S+blO/YaMLfpZLGKA5sV8f4wOXO9imjn4/rd+XpVJyBnv84\nLg7yXV9NL/VxrJ7wYsy3V/XiUcoifcdXl6aKQy8zqLYWaPeEjQh9ZQ4Htxgl\nIp1bAVsOj0luW/cu0IxISk0do3UPOSDajLAQGyIysxk/CzQMdeLnHjIkvTkq\nbKJGl1sNpfwqmiddK1vhuYZiLJhLrP/Z9GLLECcIMqfZmM5BlRlvz6E8PtWg\nbtJF/lHAINuz/4MnmCXGaSd4nKA5XLgtEhzIPQ02Eo1LcLw4M61MVF6UZinC\n+ybyqy6a5PH91vET5aaw/3hyOvyVBqsnIbTFOu+EERyLXWh1E6ApsfAfQRCR\n1wojABDaQvNGm3xUzi17onbXnYJ+8jYLYluk6dUcjlQuIwcZS2eMRgpB6zaB\nC4Fwc5CnHNqSGPZyL+tz9jYQCDQ75gGHbV3tSMqz2ZaShpreRAWjX+XsU6dN\nwfgTVKAs0pSOHWcu6BJp7yNsUK4JlWA0MoelyCtqvbdHEIPtUgrbnSRQGwcs\ncgzl\r\n=ABgt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX5A7ye5VPKx8AUOPb04iezNrMgm58qUDEPru4XX0Y8QIhAKoG4+YSQFdDL+Xa1UPxrtfvsfJR02sZL/qN9EzWCbo3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.f8ceaf79.0_1596568688741_0.24166609220386115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.6b9e385a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-ripple":"0.19.0-canary.6b9e385a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wt1JImGwdMClVC7yZN6T3ZTvqPzGz/CV1RhSJp0T27z0nZbqR7UGGK68TeDj2EK2wCxnbotganZ/SjpXEEh6GA==","shasum":"9d10e9ffd25f643523534539aa1a60b2f35a3fd4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNQCRA9TVsSAnZWagAAeQgP/RD1Dt/nrz92BEd0+dxQ\n2hehXYaj2dfo7okOOQkwxHlSw//Y5wMwo72BOiGuUEHBscoTD3bCPXyGAJEP\n+8Atv7ZN5UymeA7dv/Va8WHRRPh/XGMTeuq6H5XKcbcpf6B19IzSywM9RrsE\no+1ljteeuoV6S4yoUQvr2/cCbdOvVuDtdVd2koKonH0l/ASmGvC8HqQIkR6z\n5DnIi5z2JI2Vi6Ktj7mbgpFNwSpbgRX80HNuAJqPwSFlbLelyyvvrZ7GHKBC\nbTZf5t2yRuZnB6OzYIk5mMTGwozwyCp/NO9oOiRiaZXcKy96nTPIOOYfb6SU\nSOEJ21itnhpfKEcEyXL0qP+Xkw3vh4riH7aonPuGaBa3judTMqx1qnzEEiAc\nlQID+Ukc4iGU9zJgiKuhEb3OpimbevNtNYfnFI/JfSwLpMA/6YWOl4t3pwUf\nJaD0c47VXQkYBfr2Tz+kUW0OC/0HvhGs6Wevw0nmSdaIS1BgVryFwQFgj2g9\nMuk+9wTAqNLtkIEz/L8swFYtpmWxL9WZ9VaS2O0E6zyLz0dDl7gRZTT1Bbhh\nt094Kfr+jS1jdbj859AuEG0gsrPhjIslHCwU3lJrljPct/hzMfDnY+cvDB9N\nKVtdH5HBLE4CJKRdWJfBwsvqU6FTJ6WNRrUveT418r8e7gjcmgXP2cFgUvCz\nihKy\r\n=Liaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBrTDpZe46l60QYq6M64Mnj1JT8V6FevL5B1FAmmz9CAiEAt1i7tTw2dFnUieD3nP8ShpyzJlPAvvwttHRILskZfMg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.6b9e385a.0_1596576592088_0.565838655337032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-ripple":"0.19.0-canary.9a7e6d2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FiThgV2x0hZC7C2xSpQzvsxfr/S3s8Ac+8f6t/+Kkuik719+a/pm4cPTC+OkCu5wFeagvGdt58JqHZdxCqdWsw==","shasum":"1e948950395bdc4a0313ce09e25b8de6d741f550","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKit6CRA9TVsSAnZWagAAKM8QAI4khFRvqx3c67CNzn/V\nXWTY3RoM5cSm5zbLWD8judhVLcOcJ2l9EHo6IdaNvFfvy6EbLrWM6wSDn8fk\nLyVYtodGvQz6+gEmZ8Y2tRlhfJgGyHiUHe0+xc5EIAPwcaiUol2i/ZTLskyo\nWnaf/IMVNCXwDOXbV1F5iWuqzTts/+r6E7L1S/Jv+/w/Emazpw3D9eO8lzEa\n7IWRB+03mEgsFgkzD7jwC4vZEBxi3HKxI5GPhEbBvsys3SLXji0IMhwK7A2y\n+Ydh3De5j8djkIZgAinCutOSzVPCmBqr3CuG23S1VGL4Pc3IB4fUuGNnR4k0\ngAZGr7MH8dBAwKptTyuCihGgQli/Co/b2b2cKnG8xSea1yBiCYQbKwpYhYn5\n72EIfFQoKS3DVDA1d/xfY55icoWPWikPRZDqWoH2u8vSXBDzpPYJ/cqhxB5i\n0/miTb8SvcUUbH8JxhAVJY4dqfIIt+Gan9tIwVgIJcQezwQ/VWWoCrAEP8Ul\nlrWZfiLaawA917niNMmG/46j1bLGPyJE/jq1pfs0BlSJzeG8bOGzlijHXYq6\nhqk012oLixfdMeWC6RqObKnHpr7PbBbU344lOGQzOk0rUDW8zKwEf9o6doU6\ntliqz1x8sYRw8aLyckWvSS+/DGMDrI6ecugsaEAWw9xC7DogKfkMgUpqoaEc\nNEG9\r\n=NiVc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCErLHzoou0uAdu262AuWZqc0crwj4gIdWbitXbm8KnnwIgVmpqvjmTh6Ta5kWQ4nsF6BgXbvgzXt4mxi9M1VGJcjs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9a7e6d2a.0_1596599162322_0.916296144475607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.188f3f1c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-ripple":"0.19.0-canary.188f3f1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MxZhyIZmiyjn/cYgPhPLZCpDm609sza6ZSWN/lSmwcEsfaTmpRkinQXYRKIe6+8wvf/QsQMQPROSyngSQ0BM+w==","shasum":"d71968cac3636c2c4ffd828ada39b221ee4f0f11","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbICRA9TVsSAnZWagAA2skP/3wA48oTREIX0n//CNHv\nnBA4qJA2Tse/I2MIAWvCUX470tGnVFhsHLJyT7NhmKWNk1r4EXt5LnYYRaml\nAtkJoWUSiVZrh6axBnj//BPKQuoiiF88xV4jqTc7X+QDajF4EXos3EiwUt0G\nqxAHiTIZQ+UyIa8hPO+6yQNE0X4sgFTgxvKXNxxSIIMaSSqi9Pmst9EC6TFR\nboEDmTUIOJt10BVbPh2sbpPV8aECc30vO4/LbksABarAxu3olRiwAf/CoMPr\nAzJqqZmridK9O8j839Dg3ZizChMJqudZDHonMDUwe2z+/pWfoXxwOUlYGkEa\ny28lXdCjbOhGjGbPjSx8adMdIm/EcVgz5dpHNzDidde9wTCiNQ//oGdwyDhH\nstbTUqeidd7mgLwXE02zrxFIyaDUzDHeYudNuHZk3wPzVdFIQZmTmtbom4x8\nr2+k4g0rtE5+4CeVQaoXbs2++HFi5Mt3MCf63WVHzX31Dta7l1tJelfEqbdX\nF6ZErcf9bl9OQKQcErCxQwXFD4Y2/3kCPowRk15tEx7JTPyhNbpMsNdCrDx/\nfdjGs22yO2fgtC9vN/XUxUJhlnIxHcPzCAj5VoEbLenf6i2HoNdLMi00MzON\nGBI5juXfvJ1sSHQ/kDPLwlxFMc/b0geGsGVfdEXHRTn4bm4Sr2IEqzWwIoBe\nnC00\r\n=Lm03\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRTi0V20uq8uJdgFTaJ8ZVDOV6a4WECfBXDWoXZQxPRgIgNiR398YONP9g1y6V3ay1vwi9OnmW5bzGzPujDn576N8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.188f3f1c.0_1596651207884_0.712776855649778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.b6106add.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-ripple":"0.19.0-canary.b6106add.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-kdJ4BnrUcSMN6MS4q+YM5a1L0m0+x+Nl+3p6nG+4Vs4UmSvgrvxZ0MD4z6RMCWZCDDZ1Me/VW/8W+lpAUy/2Vg==","shasum":"933672fa30c1b22ab9927f1ec046e6da2d2fd254","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtVCRA9TVsSAnZWagAAGBEQAIdSmkAdrjIJjH3ryH37\nTIvzI40v/vFqHrz2HxMWRdcqcUGAKc2abSmwCNmmmdDb+jGnHA0ccmDneMWD\nbN/ko7ZlpxFs0O+NaT6CpCeJSW9bQD1YCtriMnxk3snCvj1NgY9Bdr1WiI0u\nm5k7+KMiNvnTDnzcTehOE1q2roay3n4EXPlax9zi1xW5tcnq3ENpyfgxKRBt\ntcYernNKOtsBDBgbJRtmSUQA2oO+FHJObje+RepXseVykFvjGYAxgPNrl1Hc\nB6M2MwBKCrPLiHIJ1oh1EoWQ6qEGNnbJcljOw6Z9i+LQcOmigaJmYbjiq3eR\nUrtd2N9RyS8rtrgQkww1YfSenzylofNohdShxHMnhO/bNjGcxBdzpMn8fvq6\nBpj/I/2qHHLW6MG68kK/R88nqdGFW+tY/wcgdnUdTcOa8MEjKb0gWL7SEHj3\nfGQcRRmu+kOShbpP+/vszdFQI8TOU/5+eJUvQj3LBEPAZ4xJa6pzjqzjXUfc\nVg/NVyIkyVhevQxGQf+fn+3+p589zypbF0tfNviMOiuTyQRSiALFgqE2FzUw\noDIFFSRUFl9wxEMKEPEah6IiqpaeQA86qjG8iTWqHDwpoBqRSKJVX+u0WKrR\nTDHVnGyyxbQJIRyp9SykJlEa+lQno4+A+00U2oFx3YI3lxeE5kE6RVP42Rnn\nlE90\r\n=CeXZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZNzzItYKg1i7MBGRbUQvfqC3z+SZewGlHDxYNOGTQkAiEA+Ur32CkaER79VnYhF3+/I4MFpzIYiuFFqDwoh+y5ggQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.b6106add.0_1596660565382_0.9258501728420547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.ebb4c667.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-ripple":"0.19.0-canary.ebb4c667.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZxpggMsdL8pvyd+WbJ+CgU6fWEnZ9wG/6ooG3eJRvTYi9awNAu+4DcUHOa8Fe+E5IiDAx6WAT69XiXpCXJbLtQ==","shasum":"79fe339bc3c12a16a4a88ec9fc744d9ccfda18ae","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xqCRA9TVsSAnZWagAA55EP/33RFB9N0Zze8zybLTwN\njbQLT1KRwj/n2w6osZizRZ1/XXzu84k8EKfvSujyfGVvTKCA0C8TfgEnsMaM\nPywNM1GNk0jOGub9AiqMTnrwb0lGao+p7ESoLBXW1oeq3qkuHeQ81yS1gToo\nFaThHKGXFGRxte3dl1V4PSPXL8P8v2e+FJcC78LE4NSttTWp7k2Mw8MycnMm\nPxzealGiugFFPrzf1zesOXXlKwOOjab3au2ZzhNsjJM4b6+PEpPVRN8mSHxC\np6AKNtoNiw0jW8aX9a0P04BS8+f44qSihudHGdS4ad/+Cur+cmk91FiJGysg\na1Kzn5NBJXvevCoeE0v5GXy6Rni/DkDgA+T1lmOPedEQzcTHMi3m3aNDlQEa\nDMc790ulR4ssz3rL9WpyeXs+X+YOkY8advZceLutZEwTM2WG+2j6hvdFsnfL\n33U5ropEv41EgBggDwJ3DiCcqEE+8n/7ctrn2EEm4TOYbTULkZb1gJboh9hg\nJjn8zy457j4cVLmhjt90IBqPHFzpxKb75EQD2Xu3KD5l/v0EEg9DH1mlqVho\nO4LXhzPRe9h0LAId91xCDnEkoFTeduD4skF4A5pek52DT6UEIAvPDy0Um9nP\n6bhq1dQhhXE/R0aYbAf5LLwpPUYgEcRGIuz50No4C+iwCFncNp6r5v/YsE+c\nOOad\r\n=rDHM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVmIE/Kpstrw4BBvpRKzHhXlKWoiLjLts8ShKylR0WhgIgHUr1uafmBtCkhBKIvDNrobRnN8dXuJ3yYVzxrJ0jsfM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.ebb4c667.0_1596673130143_0.8145670752177272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.aa44289e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-ripple":"0.19.0-canary.aa44289e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3WbmrDR3FZxn0RJRRmh6k6betaBOPeTbN6RASQz3TlkxhTPUzmi6pb6hVGLb6C68rBT0zlYOKVw4XXgqCi1QLQ==","shasum":"bef33b9737b818664aee6fe4e599488388b7134d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":107974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuRCRA9TVsSAnZWagAAX1cP/iVoWBHHylfTLTMiohCl\nCcMm4Y/5a7EjrQfL390YQyFS8udnfKAvDPRhrs8FRTiYgHaEMmWSmp/Kehqm\nflIeMcDmkVRh22x/qa/drgHXXApMDVr3nWXpITVhCgCUmVDSL6OPz0b/SpO0\neLO0yatt8ITBNYtCSBqr9Hf6UZOWtFN2GVKGlN0i7Ov5s35ra/E2b/E7pEJq\nXEm1MyQELJLx7fIhLQXe/GYFh59n1xbi6M35MoatTHwJKi411NHZp46fPnsX\nx1C5IUvX2Gjuq9kR2dGUm4myCsaWVpR4Gj7KIb4sV+xRWfXRqDvZUyjNom3F\nj3DjmiLRDe3T+BDUoN7azsn14f1jtdBCJsQcYJkPOz5uhkxVX8m/u3nzF1OZ\nb6qTX2FJmhwjPQd4tW4v0VJqwaeodqVMFbtlCy/cdKCKYkCBJyQISvQRwY63\njZ/f3iPTXz/0NlMHDDNjmQuHCDABcHpoMJo2SrcNS829VO3BhTjDpiKtWc1B\nTE9P5N1xls+V1qD+YGyPi0WFc3+b90Rj7ZaX9Losaal3Qf8VYF8Zz2XriNOR\nxVrXBaS8s6xXDMPWfcuPLNct6CUkfP0Dz92s0OUTyroEstJCl6AWHHfp1ul7\noflzvSQWi/ZZKkn01WYMubdnvr9OnRuPqF8cX01KG3D27/Ybq1hPJihmaL5W\n25gc\r\n=mxDg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL7VNdVXiimBPGCOWoly2JW+WIJLqeQwykOHJdFybdIAIgZ8bZA832/z88qIBmh2iwGNAJzhYwz+gNwSfiMxTAGY8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.aa44289e.0_1596738449408_0.7801531953682539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.e6b0816b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-ripple":"0.19.0-canary.e6b0816b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-85xpYQYHLefASiA546ACGHn959LWhQksXKikWmSBECoYrdddy+aymuqwpnDAP5dayFbMq5vL3K4RF9Ypu6s/Ug==","shasum":"1fe1506528be0bb12aead27a51ba2fd926bd3d3d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":108034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDlCRA9TVsSAnZWagAAi5EQAJcYaQxpWuC4lj07FuvS\nj/pNH7HoUghMvmiOjkoFr8MXyOSgomf7AOdWkL4+y2LdmpeI+BlAoI2SuIUY\nWTgZVfMMjS0UJ0E15+3aumd04mZ4n36GfzNRUqD6SksOeqU6x19C2VO1IxKD\nLNBDyeJ6gpkFMlBkeVZ6kY6B3CCLROEu66ufT4cwFx5N8tjh9QZT6lVm4BiJ\nspVWutdKMDLMKs9RKYHHzq5arlgtxEnzTAh+bPWJ5gVum3y5e5UzNvAYxHPn\nyyoJERzKn6IYpJkQ9U9fUgrjL7WyvRRgaGCCzOJ9in5mZXjgv/zaHJBna9eD\nl1vXei0u0eTQmr9/6BLdwgg493HYhlDMiyKUFxNLmDq2nSJ/aprYFhQJP9lE\nlUHLmz7Sm0Eaa+ZryVDLae/CvnkBzGe3u1Zs+L1lVDzxuruLDJ/wVSb1wWmn\n6Oi9m6+i+7ZuMTcsOb+cySa7XUh2eau1HDHLuTM9nop0YJgoc4Q5ZcUdrfN8\nRwYAy9TfSlhJ+0oJWcuxlyna/9x4BsSq6KwpmrVmmKDiruhvhCglH1CCLsS+\nBqEtaxhhBNvZQtO5GVbNbexkGnF66LcRk3IX0/EAsXEu26ttXvXO1HqCHbWW\nNpiShg6uL91bRkMtjOKYkmj7SzSVRYcChpR78pQUC4TQQCOW30d4sthpbyl1\nQEP7\r\n=y48s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLSJNFRCV2iGYWhruMZK4M6Jq/TaE1y32QMU09Xf7p1AiEA7391g9OLTP2BtCKtMGZIXK3tr+JvsPW5xI7GXpWeWxI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.e6b0816b.0_1596825829031_0.24033008664469024"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.96d15938.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-ripple":"0.19.0-canary.96d15938.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qcq1bY4fDwwNqs7zqIn/Jd5eM8OmzHEN2Eo/m5qLkYfgF0C4TXdM91mOEbMvO2mnAfmuDAWTu7L2WchB7NAw9g==","shasum":"d826c029fb946cc03543a0fa170796fb5d1a18e8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":108034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmJCRA9TVsSAnZWagAA+CEP+wYdFhk19PBhtuzRnzcS\nCoi6xWIKKJ8mKMFzjrcbP5bHPNMQh/nFOF1nOmPKL+4td0XE/akkELfqMO/y\nVtTFkJsV5wdmYmEJCg52ifDHylK/gWLFzLzelGrCVxRSpKlWnuGg55q5fkrU\nFGGj9l7VOtcagP5MCOihfrtoe/4TZioJCpZuDfBICj/4Xmt+PomutOePH7CN\nFRtKM6prNoVVwT4uFXkntIvAaKjP9xeTETvFhzX0SQhlI4EEXrjpbsAbNnwt\nsJMZFotVQmjW0REih5XBHOmctXnUk0a0OQlj63nQw9k2MITE/9NICSfTIHl2\nfyjuyKlJDJyD9OJ/6jwc+3iVLhAvxexeRvDuQa1/5nw2dZTCGle3Np+opdNw\nRzzdc4ymeOJzmlrz4FN/1pImROjF2QPzwT2jzMPJ94UwSktqwXbex8KDpRyi\nZETc1+0WEwVzY2jISztjLpBTp52dwmK2HrcOBMBnGgTH6j+5ZlXqefyELDf/\nsad81NU8MGTA4UtBBgna+D6/JyrspdXz+5RWvaQYN6Zi9k8742ky8i34ccDJ\n5+OX5unjX7/HKRfjmN69oWTdhRZBuZjVlNLkiySnULUInOyH530FWrsu9rAm\nnvDlXJ7HdDqGSWTJh+wReXBsM/7cU2FFU9P2OuQJPs0C/0+Vs0nhe3KN1f23\nWbE7\r\n=FdeJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICF/zQyEUci6wlWVss0jqZ+F3eKT/NR/mKQtZm4i4UQmAiANMRxmx7MfwU6wg9Glzhr47Ce4Nn5AUBl9KyXwoC8zzg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.96d15938.0_1596832136906_0.5943413626332759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9d991c8c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-ripple":"0.19.0-canary.9d991c8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6aCrRFJTlIOvXbEtHQXrPusRgdhUj5PCahJchMUY298/Ic2veV6ydIK5jecWYKXxRSUa+O/1qRp5b2EfZAy5eg==","shasum":"0fbea077bbcb66bf98f47a9d3a5e0c6157e96652","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":108034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDfCRA9TVsSAnZWagAAb34P/3F0XuscpV9s8D/0j9HH\ntZY31QPasZAv6s0AoxCY8Bw5SaoQt7zZk9QERqkA7fc6d2JWEiZPIw3syrAU\nfNa/r1OxB3Nw1O1PHD5fmpA1RZSBZXem7GM41Btz8wxHKMjIypjnsR7YZset\nOEqSvpOU1rY3TFjp8fprReTBY4+Mx4vmfrhPIliV+O92xT6bfOzWzdooYBOz\nWOtY45o1WMhIeg6akrJYeO+zsRvbggfzbooqx5J8kwvUprCveOKpLS4lvxwx\noldxBrEjvpALmmZ8Ouw/XoEBsEsy3bZp/rO6YwGf+FSG4mM+NxaFhXgYPHjO\nvLw78mAd88ILdkfPIptiSpyzh3V3qmgyn2BWyHU9g/JFYsEdexCJV5sj7Hed\nu1ZvLgFV98rRkYU7G8+PUa7XWmMbW1Fg43vySwt3wW6kQgSGSkXINMXVrKqv\nCY8/AGf77+E2gADWF8MrsVjHJZoNilre1aINCa1Zpj7xdUYSJdqVsYqKXCJa\n+gz5idMh2lqFZdA7LxWHNc5vzaLIpl2h/hs6YoWyhoNOE3CPoSsUKXAU9I/A\nV5lqRkpDQOGGkOkBGk522Wd9FVBdol9X/gC0k61Nty3VO4nmywiML1JhEqyU\nDdqxoH67AoWuJDUDScRgJzaS0nScSX47xaXOUSRpPZZ668h4bgFqB/0RnT6m\no+ny\r\n=vNfP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0fE4fHpmHLQpXcgUvQTkxP/KPzOBPpPYYZNgrhM28XwIgAPWx0DRWgBOdqEgCQDEDfQiegc9UUTxvWtxMHL0EKOA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9d991c8c.0_1596838110765_0.10193283175520462"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.13bfbd72.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-ripple":"0.19.0-canary.13bfbd72.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HJgbnLHedd1bJ4ye69q6kAyPlwCGpIoJqXL8bYFlzA+/H4i1rJUiAZIpSJr4/Czet20R/mWrocjNvLuI/vH8ig==","shasum":"1369dcdce283f77b6cbf3448a18b821d1c747d78","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":108034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+fCRA9TVsSAnZWagAAZ3MP/2JBiK1Fj7aokSrQ1UPA\nv+XUJwTLOCFTGdEFgLTR0weZONVpCAuvCvv8bik/6K8D5cWayB2U4bJ5fegn\nrXrRUd256EW1H9gdclP1PGbtGscoIXdEdJo9cWD8L+CzYRz544QRKaiufBtJ\n9Pv/T78QGOpi0TGSjyvRJyWmwexhaPwnGsQum+KQ0WLB6bRiaoYnn2mqXkNa\nYOMuv4Iz1djUcmxy3pXq3nhEMcQX8qIt+l7D4wLoOsFTvARSXYQALom1lsYj\n9BK0JELy6q8oP/NxKsOtbV7eeY5RNPzMm8EPVLP4iL2uAEyXcK+mNweaOLKz\ny2V+JGtYhHvuoU9Q/XQ6dXIvaEDdDYM3IY933tjIPx5u4gkCLjMSes8f1vkS\n11tnYPvLRUNyrCW44sTbykhm3uPCA67OrPz7SNFNqNiZ11ruMVC59VArzIM4\nKdoROS6z31vZT94AcaOk3Pk8DU6Gi8KluT9DsrLLKaVd1EFYiceg69zFyVtI\n0L5T249KmDIGUvMvJE5PNmHAhM1xghlcxspO1r+HcLlqyVyh4W6Ccw4Y77j4\npUFL5MmPRHgl3f5AXDm90K8hUAsB8L2Pmjfwui9ufBxt5LdGPLsqmN19VEy4\nTYoYWtXEsYfdoVYBIXZw0ofoAyry60lmB/2fIs5ugy9vYQElkzaMF/+M/H0h\nVxGz\r\n=8HcT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHzqfLMrTFhzfAsOOwHancicMZHSZhHTlstUIhPizvN3AiANgxgy4+SRCDet610jEWI7yBsMD455AJRac+lv9bL5tQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.13bfbd72.0_1597087647303_0.42184789217400165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.30b1b258.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-ripple":"0.19.0-canary.30b1b258.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fTinWvYaS3x79Z0L9n4xBh9oqr6RJ77CmB1ZuxOARsST3j69HVihEYot/iNV0/Gn1cS+6gkPfj4z4XxVOPGSVg==","shasum":"a3a6de15f7e77687d5117da13adbc91dbfc74c6e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":108034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajnCRA9TVsSAnZWagAA4mAP/jf+60jvXoip0Det3Bob\nyTE5GTKZ5o3JvqBzmKJUNg4cfhKuP3hL/h+VqK3wZsyKjXK7EfJNlVBvTiz/\n76xsEGlm+SsPzP6Z7baWY6zv3PnFH8XM4Pah7GCgkEg4eIb9bxhdG5cdlWBq\nsJgy5bbrKOWFZq9ITJvgS124YZJy+ZvMNSKi0OH7yDu+XVJWIlzKovJLqAuU\nnowMi8ndO1YyEdE8adIgbRWn7O9NtIrLFCoPF3HKCp0VYB53WCCnBmobR1xF\nKhq02VbLaNNzclyNa+QpR/s49doe5IvOwvGtLHxIcWVPnfMuqRnI8lx5Ow0H\n7NSDlwfkuzu1As9U0C49grrBFFTTtfF5sV+InuMhGl0wT0derJ0wmaWXeu3e\nTgTmsWShDI4ESqkkmAg0G8W1dhKAj6ZwmDAa9TwHBQ9Bjdr4CVZ5J8Cnxkgs\nRkfjfZBry879jjjdYxR8CH5JbpGpgzjIoC3x87NGYc0w4IzPmfpHciZo/YD4\nGG83a0SV+yf3McZTleXc+srwjqwfcPng7qz1N5iaqPSN+d5x183C4Rar2Zhi\ndZe2FjhxR4Y24628s6CtTlkBLIsk63PRlnfli0HgXkFDbhR7VH6cv7+loDPV\n7N3QavqyWYt4H5byRvafH42eTMmcIZ5qeiWyhqrZZ4ZgXxC9RiSpDFZVzuIj\nGOBN\r\n=gm4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD80tqpj0eTcr6moMK3pzTB/ZplAn1mkro1pd159oiKVAIhAPdvbeVhuxv1WKJNGGFfgvPU2qfM3JdOAzVh83YVcGm5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.30b1b258.0_1597090022764_0.5994118428650059"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.1583e263.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-ripple":"0.19.0-canary.1583e263.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-mark-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\n\n| Name                    | Default   | Description                         |\n| ----------------------- | --------- | ----------------------------------- |\n| `--mdc-theme-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/color_018786.png) `#018786` | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/color_000.png) `#000` | Color of the unchecked focus ripple.\n| `--mdc-checkbox-mark-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/color_fff.png) `#fff` | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n| `--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n| `--mdc-checkbox-disabled-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4C+Z4qmPovaHpwniXKmUECwrKfWfe/71AoO9aa780WS85v+mWDhzDQhKsVcj6I7e+yGGJ7lAvb9L9KsxtNP8kg==","shasum":"54bbbe12e0e6ac7752b17044ddcc1a88dae15d95","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":110214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyV3CRA9TVsSAnZWagAAeeoP/AiL9W4vIO+eRM/RUoFC\navLI5MIqBxcJ3dRiWyTHKQgYzqB4boHKmtEPR7LaFKnuX2KaJquWqoeEPvye\nWh4mwqyoAwCju+YkHsJ8viF2MCpGCjCg5lJp8iTdHjafs5TzH/7g9mfYv7df\n3c1XzWh/5qkPTccPLZiOHXPqnc1OBdUyQINO3N13JIczcB4h9+i5N3zQD+5y\nkdcCY/PmzMm2w/4C+UyFrCCDKVP8JmmR5JCxOVHpU3VncSqhIyteMYHkI6+x\nkNANbklD3FmbBYz+bVUqxLKVZ1VhN0/eykR6LyHvxVBlWSBrgwJT8PzoPMEl\n6OWG1PworfcT76vUEeboFSaqOis7QDit3ReTps+5aFE9AGU4jfqgk3jSJQ5T\n8QL2LgkXqvQu/1HyTPTnQe76YIkS0d6bvSXUIxmlYKCnS+JwjgDlRFurmaAU\n0JhjyXdoAGmWY7soL4GPdAj5nfkzPLCBYIX4MCeainkxPvcD/cPE+uW3PlgR\nWzHEKEW7P5tVVkcwgKOgIpsNezZTHk7utwALDwT/anh4b3XOMZuvmn27QghX\nyf0mZSXeXQU8gHEomRjqktscQwPIsER0qUQPi/U8PmkxBbWjyIXU+dcpfYr4\n2Rive2vKWbIEzlKzsx4woi49l5710v0kww2hvBs0VZFa+DWqOe48zecepzZX\n7OsR\r\n=bNPQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcD59+pvCcpGedalH60qDIhd8o7+H/Ma27pQwzNie6RAiBFRQyts0XiXiIgXAmpPrYyFiHRyvWN5wS0JGj7/Gbd/g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.1583e263.0_1597187446934_0.4036373956616066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.fefb1a93.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-ripple":"0.19.0-canary.fefb1a93.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JKaR/3gsk1NKqBcpajdNdyNnCeYue8XLxxdPtVlktP66GEvJKufI3/9cWOUdruhbZfzl+YCZgi4KdDq15EKfRA==","shasum":"4428e1cf20b02cc7caff853e6ff484e445bdbf46","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":98359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbpCRA9TVsSAnZWagAAwF0P/15NY2hPjPCiYsufUxiN\nF9uVVPUvoXSsrYO3dmt8cMMutOiineOXjkRDwixLKg54UEN7c/+fbzOct5MJ\n+cEzCOXXFoQG6lH4swwEaE7BlnyhGQp4lgSAQKprwqlfPOTxKNwAC0QJfsKJ\nTzht97B91uWh7QgFeYVxAVR41AvVwQRe+h2ACt7lfPO6wO09mdjjpPF+pfpP\nidwJbJ9OA9PcKrUqpWZvI+DSBZVee0WsEPKW9Rgb4eQf3SBNkzy6mfBoY0yX\nqfy6yVyAkcnfRdsYUy2+xpZBmc2bjzksBWr0lrlqzbLW+FZ8v8dCDF5R0h52\n6k1Pc36BcNZgUu7O12OK5H7BgX179WGTseIwwHVJF8X1p5puDV83mm4ikGV2\nABAStOzfdX6X1E0xLvS58yO6/xssa1rkh9E6DFA/qfmk542teOhOdKI0qkBj\nyvuk9Zs4sGZNQ3/rfN+elDpAlsLcDZpw6Gc2EsKhCegSraXp6Rj96+57XYKX\nADnNzwJKS8ia+atZEiEvYmtFIHDgc2jg6tRHvf98dg7ivI55xwFj5kLqDIRk\nweJzkk13TwlwOrSaKFKCv0KZc2yVFf2n7LrU2HlKvvQuzEXcuIbC7ZEiF2Ko\n4bwHmTjcrATl3AIrXT8TiR2eTLVSk2X0CQ7KVxLn6qi17W5fF2J1yKt/XHrJ\nhiJc\r\n=pKDj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsI+QprU2evN64OGRUefqAK01dYim+2FG68+eNKwsdQgIgJVRsfAy5LDCHMVnzXRwPz9LDpxhBvQLZMdgjYwrYkQ4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.fefb1a93.0_1597191913430_0.4458260047568867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-ripple":"0.19.0-canary.1ac5b9d4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wc9tDMcxHl/w++QNANsxSrJOk+NLYD3QrbhpwMnYnGSMeectfL38Z58m3+Jjd/vch5QsZa3mBBRzAKRCGrd/nw==","shasum":"0d449d07e4f80b0538af1b1922a7a02b3d50d4eb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":17,"unpackedSize":100856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSSCRA9TVsSAnZWagAA6/kQAJijjmjQkYA2fZnVBEyQ\ns+8DSD4FbY3c3D8pZ2zof2T320o9sStRQx2HcSfC71XZeX9c+nglNw48ICDx\nkMai92eE91aOWuAr2igHl4WlfPV3/AYFkRQAhs3/+zK+Z728oo2mUWCWIl7V\n7oPT/+ZsW/DMObC5lucPuYwWulk+XXne2eEH/06o2GY6hDPeIUzuf/3PmP1m\nP+Q+9/ltWXhkNT6zVVHN+55H9cBPA8JyHk8yrKOduS/xdMTzW5yJbsxI0gZW\nldhPMoz76r07s05rgCu7Ei2QQvh7cUhGedoEbk3pKJAW5DOVdXfFK8c1dOuB\nhaEBSA/RsZhUG5Y1lSR93907R62sUtvloKGEp/b98sdv9Jn5qgtyV2ASYvER\nfKKhcDIYDc4pqJ/FPKwrauXpThVImIHpIvp+9QLOw6/e733IQKYmSUJs5NUi\nsrktytF6fpwcmYVV0dgZmUgAs5PuoOWGKIH4aP+7CMP4rVnmAy95z0/GrO/P\nIKPtdyd1rDvwOQ7Ud63kI3uzg4sdT0xNfD3DS81f+jV6IXYpgOfbA47jELIM\nDhIl077s7zqD/yYz0+eVM6zSZEkA7K0hGvDLLD89Kvbg1T+yftVtpwrNYwbw\nSNJDrTIEEvkdkHnWCoFOM77ewV8f0e48S/+mm9B+s/1t8Xc/zXmU5OCrwDW5\nu0In\r\n=Ffrj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIm/4FGPyyqU5s2dwJYKUkQhzMKj9u2/U/iqr7fiRo4AiAGI3qHkkdIvJUCj38GTG8yt1/j6mqmsjY8gvf8Ab8QYQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.1ac5b9d4.0_1597256849873_0.20435113100035052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.f17f5052.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-ripple":"0.19.0-canary.f17f5052.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WyXntzw2IefHsjiy5k9v/HWcAbT3zaC+/awh/Zt23Chh6UgVsUYZI4fvCf2aH36VZwhPeX7Sgzc3Rbsj/nQiHw==","shasum":"d11de78f1674c15ef77dc75b1a29129781b6e4ba","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.f17f5052.0.tgz","fileCount":17,"unpackedSize":100856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXT8CRA9TVsSAnZWagAAzFEP/1/B/NRQgWKZPCWdDxi0\n262kjfPygeHw2jQ8RCis+auC2bapqzrpFSCe8pqbmADhm7C+QEyCvEBM1P/F\nH0g9OlMxbnGzulHOMg0cPexuFa2fyC77e4dOmoRn77R+E+2A3Sq/sQM/RhrV\nG2Duc4QmWEaW9+pEeq0QgJLBgF1yeeRlDBg4ILDKsqDP05kGn2e/xZmYDrRS\nxd948K6aFN1ya/9DMna00Rhvf6eaFVQlqCZAsY9HyrwyC1WuhTnBER2t+RZR\nPGU2Xfl4DF7jTkEkuZ6/5STkNTuu1bJ1xJvuPDpfXXiQusStJvTDqaR2cE0o\ndxZ+Xr6X/bW+elyCxcHpYeON06ToRD4fwT7bhAnUzLbWcUoPJVhnMaG4EoZV\ntQ3WEvBMzleyFaMD4IcYlaq3Q3DKkEEI7Ks7GMaHUGX89C5aZUKrWlYg9KmW\nlXLPzuL6O0umiBWQDrLt0C4Dfuh41pActSIzrRbbEvX8zBTHi3dfqc1Wdt3K\nh0plwUjKYzS9UvEFRW37dPDi/MRGEtkdcApFJnOw9lhEDxwrQAPbIpAf62sK\nJYtzzsbaWdq2FQVUhb5vJOlA9FNNzRxsz1TeBnxhApmZ9xRCgWKthOz9dvpd\n2IBe6R/EToP41JFnqGnbI1GBr8/RB/3MwywXNJ1yDwSyPWFiHtyOVpnQYYUg\nGM+R\r\n=j1Ab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUOAWR69kEZw12yFo4Btw8YeIAy5PUQsWYO3sjbtIdFAIhALaJDZTP5Mll4ugEeaat220u37AH23AJIP7U4jJpHaTM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.f17f5052.0_1597338875987_0.6895566188392548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.80b5d20d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-ripple":"0.19.0-canary.80b5d20d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bXmY3RecIfSgoY/0UoLYfsEA4k6TZnUnVBr0zi4q7teO6ZR3blJHClAoBz67QVcIFlDbuOAbVBBt4+rKk9mAyg==","shasum":"326041e9f46badbbcc7f956066b1f98c72ef1147","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.80b5d20d.0.tgz","fileCount":17,"unpackedSize":100856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOxCRA9TVsSAnZWagAAwrkP/iS/xzU6J16GwPBZ6bNH\nNOl4/yRZ3cgUWI9kZV/vtMGIq2IveyoqYWTlNo1WNC8jZ5D3xgJZWyr7ndkx\n8QfNep/tj7EX/JXS2w+tTqoMgcQ/NDGIBCbvSgjumWGpt3xNMFHSaOpA6PYw\nLzhOgCk5uoQ7C3tbVfyq+qMXhOzAz5mgzm/KOL9vj1XV2bRkJcynGllqKCHW\nEN9EoBGK0fu21NDfNXSjUm8EhE8MVu+vyQ8YzS+aEFdSGWRdbFRY87TgLA4S\nW1HPG4mDFpfxrYhbmg2bZc/Glsxko8UF7t4rfqedw4PJcq43zu1AXvO80Fjp\noqvmyNz7aHqq0rRhmEMFMz9ihXNodj0rcgi58+RtUtYEyV//URtbHzmv+cPO\n4mu0ogMnGGewVBH21uOZYHQt4JvbJv/A8od2+SrRsSX06Z13hIq7zu57SiKc\n1ScCd54+j4irWvHUopuiFilMQv4u17iEv422w0zu4m123MhhJBxzVeZaNkxe\nECuCrqA1yogEUqEBZ1Cb16ZyYsjkku4xf489d2jrOBJSAsz4ZWNbAOIH1UCu\nMZdZlMqMKanxVfQYRpsob7G+/6SfGoMt4XCRd4m3eyic6+3XiCckK0MOzYz8\n4mIeT2iOI+CbEEXfqGBN+kGh3FI1QibYsMZO0/zZy0SzidJXf1ZDHfLa+1GE\nHkN6\r\n=4zhW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMH8XHhIt0/ooAfVm8GsQWCj4lb+KYe7QG1yDCRXDXsQIhAOfkeZP8zvkD+rcehszo7Mr1oySUNDdsm19FbHXzfFrZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.80b5d20d.0_1597342641082_0.9257247555243691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.758635ed.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-ripple":"0.19.0-canary.758635ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-60xD73EkiLzlCYa8/c1Zzi3OqwE5f9zI15rrKaKqdidG61b+4XhNB8PlJ44o3VnxozEbzPPCgBBbOHc2vcIJHw==","shasum":"72b12905e1b0a56f69f92d417f61da828fc94c61","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.758635ed.0.tgz","fileCount":17,"unpackedSize":100835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsb7CRA9TVsSAnZWagAAxooP/R7ZwXkdcuaFpYyTh31Q\n4J+znRVRUNIeYKHMt41huOUVE0ErjBZY5TjUvJt/wZ1V/riv7Phu1QJW+1KO\njFhNz5S4et5iyAemlIrqqke4L8KX0fR30nmrgS8ooPfY4ZCxGi5etYC5SU9L\nPGVwelL+ql4BGMK5i1vsFavFYTLSDomg8oWZytLo2/CqSpyncaCLHz3N1kTL\nWaycahf9EEQJKsv64LcO/jLaRcKnkn9CYqR2oaSFA/r9mAKhuh6C3bm8duXo\n4a0d2LLiVPxVdjzfwXeG8rYzjeCeEL+Ojn18DMtmeOofdKtvha4HUg+0f4FT\nls/HGGAj7eRQmgM35zylyuIs/OmTYPctzrXCED0/WzL4VjK5eDYHXZhkfo8B\n4O3EazmDiWiwwwRga85oOYjZvx9GJQxfFtyJ8JsqMT24ETZB8sSqhxsIA54F\netQR89n3B9htO7fpo3KcD259BMB+AAdXBwiDXKCFm/BigrEnAAkPfvUVMNDL\ntOCTpUKfyQl0GCaBH/zERHNJQfTIdvrsFofE7O1x9aQ7ApS/Btgx7hEadbGz\n0AkWbzoEcdBiN1dOHx2zhxBsWobE1pGtfWv4rqEv7jTOSV2Ojz63RMM6Alyx\nDFoAoSFnTpJO397n8Jvgp9NeDH7vMg5K+G+Vl+jFg3fmnv2HoljUhR1Btlp7\nM3yf\r\n=/ftU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKTHDBqaW00+/AAVVYVdfbvlTgvrQXvQ80wY5o6pUFzgIgWrEc+EPcHNeJNfob1H9WXFqTaDPjxl6sWbHkvtbaj6s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.758635ed.0_1597425402706_0.6616651435045704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.18d6b808.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-ripple":"0.19.0-canary.18d6b808.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-c3/BJR1Wwx/bc4sn7sD2K5HI7hOxHFWZTIsQDoDoRK+7STvxoHpmi7fOByOwFEwog1abeDfL4qKorKm8Clkgcg==","shasum":"05b46e97cc6db3e6508f61f697589309475dae92","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.18d6b808.0.tgz","fileCount":17,"unpackedSize":100835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlYCRA9TVsSAnZWagAA7y0P/iy+OsGK0ffe9/VBLQi5\nD0XpK8Ftcx723B/xPBBRrYyhwViCDydgWyb8jhjjahn4kOb9HVIU4WYjc4NT\nvfuQRZpb+DZIG1lwRGyEQwupOnswZCVY2wa5+bGMfkGnx4baBPmeSO29uRSM\ngdMKwaWWKosyuGSbyJ4WKbm5N6+ha9CRA3vRaHZS9hhbH5eXzehZjmvLymD0\n+6R2RZ+8N2qu7vDJtOARxyC9/IB7dEmoMDUhwGnTfjZkVJ6NuyI16KvvToWt\n8+5THwzbItrul//rhF5zTMEhXs0tTdCzm/59HS2tDzPxRYaGk5oaZQJlBeRZ\n9egXlu8SZoTsU1904acKWI994HIn0xDWXpGjxH3Poh1HNSjS+UBtDD4Z+NUf\nnjCjzdc5ARu85aVeccB2XlOEgBYvSI95vgiBalI8cf8EaW/HrbxSt9BV1auY\n2+r8PyLgOtra1VQY17H5bS+yIrocKcd/uwrdE59Q8z9E1prd0jeTC6hbs1co\nwixamQktl/HauxWVWxjnO3+k8mFsc1Ab6teda5JQ5XcH5pQFJC1X0I4dPylF\nJcqNk8qO/VhhGsNnpEwQnKb6vwrq6tIKW+FlrQru0noqvKAPK4KeMkqXs5qe\nTl+s9TbBxkh50FsKJ6UcDdyVhYyqjZEmQ9KtSKBwGjPD7WChR4YZgOLq9R9s\nvws3\r\n=4pY+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv47ayi+yAJlz6RgY3HW5FeWH7ymT1nrm9ZKzEDECMeAIhAL7ej495+2bm3reZGAty3XSLKdueWDKWUaDlOMjkM2it"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.18d6b808.0_1597446488295_0.5744905678056871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-ripple":"0.19.0-canary.5f8ffbd1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-b9+os/++Y0qZaMOHF6/BNgpiNh57mtcwsfCvaSsKN5QklU8HgmSjW0iT7Fg2TNKrf2shUwJM3PdhzKhzNYvYkg==","shasum":"c3d56636518ffc0e9c8763d3d73e009bb92381d3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":17,"unpackedSize":100835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGFCRA9TVsSAnZWagAAdpQP/jnvzaLPjcjIdkr964v9\nHguwUJY/W6hWHCf8uSTErTBfsDr3qsvWpQlhoZXf8vgrLW18qfPxwtnCssvz\nPrUP9iPOv5iWkOEsdicKsJW1B/4PODEZr7OVsSCckOR611zkVlyqHrSbHl+l\nc9xw8iY413wg6fQBijB+LwfHCP4HOVliZ95FKIIkuV9/dGSG3l2Ea3Wore55\n1bh8N8FXQMEkoWJcFt9pbJHq2vj0eg/IbQfnOphyhjZENcEFRvsHRdNHdcM/\nNMbWGp7+YMqiqxyhUBV64D9cjNlxCd9daBXSD0BdL9KRUpNFKkxZ/A2QFUYA\nu7lN1DyxKkzQicTjp8vt3RtzP5S/uFy/bK2JyJL1LgUHm1BkOFWY7sGUZBPX\nOL4a9zHirC3hPxZyQQ3J+v181RH9NQJFQCFEPsjzQJVfrp0dIKKdxoLhLIU6\nwaclV0yZJE7sARQ9rAoPNvEQ/JHRtHQL1wFtIkets8h7h1L7sZctdeFavRDL\n/v3BhZpAtt3ezqJR1YKTLdJdoCNrGoyQgeO7fWvX8/ne+HQv2nZ90029UK1Z\nWwUkl3Y8DbVbJzf9muSBv3M7c5GeOKW/hsuMqLTOvJM9cCKqq2j8BgaNfERm\n7sGl/xAp8T13rmeFGRvOyVtpV6fy7SZcvLq9zd9127voTDR6fJxX2PEG5mWO\nBSM9\r\n=ZJ6R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCL+EgzbimS0D0prHLe/SFg7armZk9+QJyLcMEX6j3QQIgCw/fndY1CDMYQOl8BOvuxNzuAGIo1E+dwo+eGiDYyi8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.5f8ffbd1.0_1597702532814_0.9538083087618001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.8604d59e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-ripple":"0.19.0-canary.8604d59e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vLpIEESIYlJ9i15CIkF64wQweh/c4AIkhwDaJPiLOeFvQYbOfBF4vDoh71L29c40B+2a9EHs0ldnCM3TNvVAVQ==","shasum":"227756fbffb9eeb405283ee724e3301450a31cc4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.8604d59e.0.tgz","fileCount":17,"unpackedSize":100823,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyirCRA9TVsSAnZWagAALVwP/iovag0IZJjJJYkCuQjn\nDN1B/OhqSR9YbcKNeh030c15boCUXjyJUQBjGpH7dkbiXpbt0IK7Qoagoxsw\ntOf3dF4JEQUmMzHNnw5Kho8+jKtFCezFMjVgTPPqL00kVP+iZ/U2MFNXMHub\nKr3IYCseopYmj+ir5WpvcohkC3aflnHqTp+DwOamLcHt5Y9lLXDvxRfg1E+G\n86vqtwmi/0Bu383LNrhcRNWYSglgZyE0+n4r1CEP09F+adBxv/C5sbx/lGBd\n6ylft2eyn+zfkE4LV+CEVdKlCHCcZclGisxqYeYBKM0vNhmwQa8sZ0mUyTkU\ntBUzMgTIpjpIOIDSBfKIig+S8VKV8kN4Vww1hRR1nq7rx4ODvMJV1Ksq0s2X\n1WTHNNfDB8XjrguVYwLMCZVKmr8mTn0IXoaGtcX0Tl/BqlpLFfcQ0VQ/9UdY\n7BHnymyigAcY/2JPnBUWvq5EyCsrKEK7bjMytV474z4W17mqY9WNoc9okl1H\nSFYCPzo9QXnzXKrVU5JGgRDkqLTkgtFY8A6tf1tpBZN/S3+qtAFe+Y9UoEwH\n8H2f+bA4Cmyl6oTC94Ypu8D4CtLK9e1KVb5B6LLjgPThF9aTApiN68I6Gsey\ngole5dOhcZXK3SYLz1RKwAxALgPk/DatyPKBEvYPsI+ywUIejs6o/0Nnq6mB\ndmD8\r\n=8aGG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRNhq+6draVfhzurIKUcC32nlP8rJM1D9UB78Ql0oYBAIhAM6olanuj9mX8fhBwzvjP2WvZri6UTkPSLUcuqLRJ+B/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.8604d59e.0_1597712555240_0.5154997191332562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-ripple":"0.19.0-canary.1d7d5e34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8LO6a2IpkBo6d01kadKYcu17w855RenVtVlAjSuMwgOPNZA0iMYtrrRmA+EINr0JvpbZX2YAUazx4JPx2yg1fA==","shasum":"7e9396445f5606be2db7350fd72e4a94abf93c57","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.1d7d5e34.0.tgz","fileCount":17,"unpackedSize":101063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyouCRA9TVsSAnZWagAALyMP/RLbq7njARXXcv9ExkV1\nyo4jGdrZ3W+tiz6IWZRpW3rJXInwuAG4J3yXqTIjJcg4auLf4fplHrgVAVOq\nTK4S0DDxfl86cbUEVz8nD4zEalAzePpXWLFlc+rQa0PZ33bt13NoIFrte2tu\nrqPxAOrc2Cy25QrmnUq3d92XCeOgya+OPMSz4GMFh1tzGxv5G4zz0V+i1B26\nIIZJINVyw7Rh49nGTZrSSeMNPz88B9ldddg7OVnnitSW7sEr/G+KcXYZxX7M\n9032ggJZTz5Ohnnopn52KK2VNEG8/WK2JtTUNSEmcbKJTuYBsqFF2CUisNZd\nwUV7P8kU7IOj+SNG2XM/JRe2DYaLAneHuc9DPbVs2ipl3EdkzRtmmUnhi2gX\nX9/m/vdwcI4siQnK8hNooEHEKll5Hbqfnpm/6uwLFh65HziJgbhdE0kbRy/g\nNrPayYg62DT/mJ2sTnbuhGiJpJtDPR++9314yeZbBviuJ4dG23caAZ3AHbcF\nrEkqIkb4WkYgBw+gPM2QJhyG4Vsf5VeUDu5nw+QPDlDVaScZJH8OloVbQoPs\n6pS2Sz8Q/SRLAt/1cCVMrNPycrTrEXj1m4u/CAIYm1tlYCSUy2GaBTEIZB8z\nJIAMlhVLAEZ8SlKt+HsXg8LitcvEIMMf/dJPAl0PWRnxabWnr1pbqbHalpZP\ntWtA\r\n=VrQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnpQBS1JgNAxB3xy8r50sqDoQb6B7cnNqZIsGVpgWw4AiEA7Uu9BiQ5PHq5uJ9jyrxrd6na/T32OdAYZvMNUjQBVWo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.1d7d5e34.0_1597712942365_0.5535138694839101"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9cc95c07.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-ripple":"0.19.0-canary.9cc95c07.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WwbAi5vYfdFLZ3HFAoLNd6d9a918z5wjUQCLgP31M82MNNp6Yi6kXDF4soOtVvNDa3Ef9XksjqmHryKrVviqRw==","shasum":"4decf89148076eda8b15ee4c68a7401befadd0e0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9cc95c07.0.tgz","fileCount":17,"unpackedSize":101063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyv9CRA9TVsSAnZWagAALcQP/2f3pyrbKn3TCxwEYEAH\nQX1TQAKPWG92j3gbZCmWvGp3JWSB+s39vHeK93SfwKBXsMmyxzj/dfh+2Whq\nrnQUR7GexqVH1xiknMDlrNSQ3qkzUAFlg7s7l8thiJ5XNYAFXPe0NV272+QC\nN7CYD97w5U6MD0/O2elTcWbPt6STIkNgPeyvdA3o4SyX7Nh95PfQO/wxaiBG\nloAmh6swvsMU+Fcjq6FlikE+dfO1AGr+0W2Zda/z3Ll2NHQ1T2wGpPv19Dwc\nQU41IR7ZMErgh9WLxZSrpNnn1UDTnMufeqVdmmOHgXnCd/O14N+UStReWX0G\nFd+IdqO4S6MEi1Xwt73a9l7r1eEvURkLt7R5wJ9QkB4zNzPz5F/8quwJrRXC\nz8K+QbXjNm0wxLpJznGrMMtM/pKEffdzzBgYY9CL7tApLTRgakpCpnUByDa+\n94pYYk5ex3fhwOYaN8y3t5YWfaOcKCQbTHtE4CtrCFRIMceS39pnPHzYyw/s\nubWp/+O52i1O/gw4WoiyA14n0LT9D+av17gIAKWjI1Xlb1aFUh3YY4hvwVBv\nCGFvAZ3fhXMsq3r+yqKid0pVYmyetj+L+jQGmvyWNBJIsq3PeD3A60BZqzrG\nP/wZXHFeL/cqwSPjH7Dy1ay+lo+mGTB6mYd0gSxhuEuVYHwc9hiJUaBVJoa8\nA6iK\r\n=/u0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF7AtG/LlEyiY/8zBchqpv41iuMVy6s0OqMOK3ExdnGAIhAIeBZF6VVPcXSYBcJhDPyzqoV49WgIFuE8svd+ey77yJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9cc95c07.0_1597713404833_0.7575625393917851"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9f65ced3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-ripple":"0.19.0-canary.9f65ced3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jaNUDiBnSNnhtqzHRvnlJE8E/SZQIcSKueBVU3iBULVurPfBG7L70ohI7jGfo3ubRE4ucd4R6dfp9neevZJAWg==","shasum":"b19ee4d355296c62d20f233af0ea630525078981","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9f65ced3.0.tgz","fileCount":17,"unpackedSize":101063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcMCRA9TVsSAnZWagAA5TIP/1TNQCDfxjNy26pTqnRr\nt6fWTuOsqQHVcr47LbLt7NdnAIPxUostogQcJIiQ1D5BVQ7fAHkLpx4dISst\nK/TGJK/aN+bbx6eMC8V24l9APOVloMEgW0dqE7aGqjvEIkn2dQkAQuCXNW5q\nWKHBXdHCi07QTdQMhDevnOYKJtcLd1bYRs+f6B0Ema0VmDjyv3GFKIMd+qXh\n0kRON69BW5JHuCvA/c5PoZ1h+1qA3RzdIq+pBpHBcQP/N/Rtp0yq/PSECDJL\n+YZLdXgBdnqyvKgqfAI9sDZXdeBPM/8tfP8Tlp7zrE0IXwFXmANd0NkDuRsk\nMwJswwNAD+pbo6hffGuYkFYyh5gD/nnEens4+yKkwP2xD8xfAqRLEIsGm29F\nmNWvyJ8kBjUdCiSf00nE858EhqCCPqCSilmJtABrDx8Wm0arWB8wq2P78HNW\n0FXsU0UpbUQ0Mo7dCQPWzeTwW0A06NHYe5Lk49uTqKomRueURqmcGJDy+eNc\n9tycH6IncekUA3gLG7oZyJazYHeBoVUvEiiZCX2Ka1vhXBFBNtd5srWKk6L8\njOQc6KUEwSwz9p2bk77r+0YJDK6nrwjbZ2d94B/K1/26wvMFDa/Hl1QVZEaB\n07SVN4BNT7fRQ+G+fmkgQ+lb1qo2iiarqzEsfMvfkPwKZIOz+eVG0IuRlaDE\nNWDR\r\n=stQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxvlGdJWSdKgLdEbCOuCKxkZBxNNiEYWCUup2c1DrIawIhAMe2Aev0NZvDlduxOPSgLAGYlkUi1sesgc7lCeBZt/HG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9f65ced3.0_1597781772024_0.3776818751333586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.5962b365.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-ripple":"0.19.0-canary.5962b365.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8JYLkdKdUh2M8A9PcDI0h86Wa/YmHUkh7DJwB83MZH0btjyKGZEhkFG0tNnaaRuQmir5YnHZCBrcYlYqzTqb9A==","shasum":"d2362f15f89c1bab7f46eed1ed15c68367760385","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.5962b365.0.tgz","fileCount":17,"unpackedSize":101063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYuICRA9TVsSAnZWagAAR40P/3M9Pc5QVk2hCFYroz6v\ntlq7V/RC9vdfRtfulVj4cqllx6oNzbKyh4mRzYZAyEuLen9cSAHcML7TwWEh\n483n3W45llecAvhocN1ZdTXysTW2KOdNxKYY0tZE8phrcdFRfdO+Sbnj95gt\nwv1EG1xIA1whsygMlJWpjOARTOZhllojDAMhT/lM86A00c/qvHQ7+oDluqwS\nSTvT3CxlowPy1zG+9NjuVJvp1AjZw3QDUlRyWI3fZrujctYNJV5oQFe1gTMg\n6xZA0cb4r9lC4vuIocH29mobEoKYYZlnFlOhvs6R4raWkLEZIa9C7ootHLiX\nwyj4BVCmuwFwz6Me2XCYpnUsw0h2oNMKkrwqdWqlzaPHUpWoBk+GsX6G85Dx\ng6LG6pyQ6/Lnyb/kk9pAGuPbVtcMgSMyhQyD0y2Z4cn2GcQe8ZMmFVTgUvO8\njacBJ8UAbb9La9PgEaomj5VPQs0oKs+HHTtFW3qdHOMdcq/cdbvIrVhZv5Fn\nXqudK8YnVekCR0bApQazuN0tyrr6+36EmmhrhLGqX0cqE9x2XObUa2jOl6OA\neFV1J7CQ6eSWbvqaGqmWKIiCtHR/eUfeGYRpkpI1FlKmUrwsiVqEqujdJ6FN\n1wHhXfti+vDOlYFiQn3Uy/6JzJRaJihDU6yWxF9vEhT9AmaJhJYhD3e0b2QF\nXAsf\r\n=RzAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9pJw68oKLEQ2mG4UjK6ECC4ZVCEQKU25papvKspOHtAiEAzFD/kwUnejrZ/AtbNAu8qUDBBGwqZWF5IYw02boTOh0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.5962b365.0_1597868936010_0.6423579745116714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9c9ec756.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-ripple":"0.19.0-canary.9c9ec756.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Mq8jZntF0TxaFyJJdAyX/inPkin14Pl2EDObkcA3j7oITl10a4cNrqav1sxtdFP1wh594SW6psO4P8M2g5G4FA==","shasum":"869bfe1d562e7a169ba1f59d297669811defb7a8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9c9ec756.0.tgz","fileCount":17,"unpackedSize":101063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsc8CRA9TVsSAnZWagAAFKEP/jp2ApPem1LgMjxmbX5p\ndMeadN0JGIF0A2A6aV6gBxInj2HvBwSsAoJt2wjWIs2kX8F8OUQ6ptX65iBE\nkbvtNtGkVvW+0deFrUHRf9sofChtqIknGme8FncdmekRBdsCw9Re9PRdwsf2\nTGngINBD5b+6In8EIvQoBCsxMH5hlj1ZoZ6ixxadrMD9dnja2uod3M7bvHmr\nztB7OauITdX5xH+5aU6InlFNZ45zbG3KwTIQzRIDusq1AXiIjr/TyEGuCmQY\nJQwip6aavO46boW/NCsA97w7BBLil58d7KvA2RTmsoQIDtZyaEr0Zl8eHQzQ\nBPw60b6a5L0mrtG4F44J4CkQp2RinDFkAJsPbaihKt0V5tBJQ06QsRZm1ZkY\nSca0GuMdJf2CpxJxVjlrk8Z4uh85uH2xc2LPBGrguRk4NeQQTIndsaehS0w2\nBfF6PvJZV9LZvgfQTV1HJ5qNXFEPNqMltMIYDtKADjCe7aWl2V2GFX10J9Zx\n4eHAwiPT0ofxT6iJA6v4vWKt3eKKEExlvNIVq0mSNywkS9JlIgkLAzf4KawC\nQTgjJ5dWEPUAhIcsC/gExwSgYa4kws2YIV/qgIPSbcw59ySlzvfJt2L9MWA0\nYHQgwRRVKE3QnDVogNz2Xk0Y6yTihBHxLOwr4g1+6iTDPl9fh4hJIBy68zAN\nHY+e\r\n=H2Br\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC70gsgB3K2d3hEmOmuIpha/Is9jeyeFgQAKXcDNSjx5AiBFZFFJCwFrevpQxaSlsW3j9QNf+cskpEfoxzBnlSTdSQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9c9ec756.0_1597949756196_0.3316360426818883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-ripple":"0.19.0-canary.fa0ad66a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CfpJEXeanDWrNRFrDfoi/XGVy98pv8k3zVr8D7S/itaCagXqdxTrMsNZa1dvrPgOvOOczj/0pYEqRrkxEicxkg==","shasum":"c7fdfb368e275c556496089b4c1775bfc34f62de","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.fa0ad66a.0.tgz","fileCount":17,"unpackedSize":101039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt55CRA9TVsSAnZWagAAjsoP/j6XX8a2VBYOu58ut5x8\nW27bFSfF6MlzRlp8YQB36ufztHJfAoX4gcX31K7Blz50zzTMZHhkVJ/uwAYJ\noaN8Rn/dHnr26ocqxFfWHLkOmtT9KPqj4TzqrESA/gSCD4uR+KH8PJ+gtctK\nhPy8qkoLWSeHYG/aPpKcUG0suMGmy3fWvK6V98EkKBOHkXQj5HnyED+T3yv8\n44RheSmbal6YOIz6rDhns8VksNHLt4Be6ZUSxqN7rHyF3HZfLf2NR0QBvPUD\nckVIrz/AOeS67mBt0Ay3J3fDzK0nAu2QYR4WaAlMvsym6j7wiMpB3sfcStdl\ntV9F2fXJ/bHr6dNVjjCHff0xcMGWrrtxwajRsdAJt9kOHaWLK+C4BMuLWGbE\nBVC9/aWHlchs9Wud2RpOf98t3fGk6Hjac5DfswHxLiaLFELN9h1wjBuju2zS\niZdaB/bC8ETdtkvSxOzp1Q8+V9FMfWbwyERwvf99RsgSraRa3NC9IZto97m2\niinsaRjuYu/7109bCEboA3/366vgPJbIFi3AEmEVuB+nuho0WgdjzqcoPUeC\n84djOSZFdjzmALxDAdv1enJ2PoyG7VyEd5FBoR8VNuFraJiAwY7pDH0Rr3cI\nusAanyodCCh4MsQ5ikFGwp/SgJgQjYl/gKYHOwUnDkNOUIPKlfODwNTn86k6\nSNl0\r\n=aaFs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD161kL0z31tQfp3G7zVuZWH7mVIMDnybCxdeN0rkqlCgIgSt390EmEqXIQd7V2tl+ZKaR+yr/XiIoyGFogVcMUXsw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.fa0ad66a.0_1597955704819_0.4859339294988354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-ripple":"0.19.0-canary.06ecdd6b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VWVoYS1MRVHTL6+BRY8dyv+Ujj+KB6B80SQv7LGYSIDzas8qHpU2J+AEGGLL0Y7o8rM1q24H/0MfSxrtCtBwnw==","shasum":"87eb070e3bc97a790d8957eb737f7bc4b6abb51c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.06ecdd6b.0.tgz","fileCount":17,"unpackedSize":101039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxKCRA9TVsSAnZWagAAq9QP/1HQULpnXoisrx9OMvCY\n1CFIv0gljf0hnw2crQAyfxTNyfrhA6+PsiNNkounIpOoa9FldUR6ydG+ygss\nH/HMjbLhz54blgZNUFW+JUdvxUn91HtEtNGG9X1hnN9KNc7Nup0uuTsRluq8\n9+QpXAnFUbZhcYPHY5Hb62uczbluQVo81cFKDjPbKV/qA6P1hRPm1zH9S+Gi\neL2W5cY6l/fjw3xmfGhh6Or4jWmQcxR7S7U6sahXv9W1HgaITVXiWUBALqFJ\n+lUEb2pLGUIPrMfG0V75EodFdXoOSnfoqwldDgoBxXdiPmIznyIHlFgUK4+s\nMLs63GbkJXxs+YFu4n18WgSfpxEBOAggaO4T7KgE4PYNzxyvPCTh1QuwYSX5\nsQ6A/5qVT4h6Yf7JZcmePkI1JUuh1AH6eZ2+STfEOjwp3O7KFs6pm6ZUoyYZ\nXANU604HyYuAnSYP1QT09QTtXP4ZVcXVfsgnbT+KwTYc+0flOI5mpkF6ZQgM\nxlBOeAAVFDdX7JmxeaEyZ5ghOpeUqPYefozPCJSyWLZX2U9es0xnkAAMRmjz\npvW0/9RgESz+S1zbJZXXTH76fLkouPvCL50ILcnK+42McebVJCxQ87vivER4\nVjPFop6ts7D4M0Wk3w2DdxeHbI5qK4HElSfGXBf29teJnRW5bGtQVxOuAPZO\nLfox\r\n=YMFY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeA79eq3E0ssUzav1OqsO5uU2A35aLiYk2xET6CVYb2AiBMnXiszouzSw3ZyIOJXt+/MsTdyCKokD/EZ4ApYrlRkg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.06ecdd6b.0_1597959241776_0.601538391244776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.2bca2318.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-ripple":"0.19.0-canary.2bca2318.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bHdfdQxdiXJt2BMJL+zvRHA/j/pYZw7iT9mIC20C6Ta5tbPv8d2B3Acb/cjE8ixiBbruulrGn1euSspI0Qpliw==","shasum":"464728f444302ed7f79dd58fe47467d49e7b9c99","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.2bca2318.0.tgz","fileCount":17,"unpackedSize":101039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAncCRA9TVsSAnZWagAAmzMP/A5kZuH2iJbp9rYSIszB\nY2vebS8lQibMB3v3VThhDaSfmHSfYibTUquLI4ZcMlbE4fVSBT0l4IGbXuKJ\noaDqv9VS3I5fS3oSyhcqM5yGG+CRfG49fY+osrlkuHnb2o4KVDsNasyBT29C\ndgtXZxf+o+KbTIZEk77gUjf35VJBUtOioH/1QAQ958TYNrfnovNBgh6P7YRR\nXTxq4nPkJyBc/FKrLi2j7df364PI/AtzQ89KBv0p1WJMWBQ4ycnswmqV+ALm\nMpNdy3M1m1yA72jf94ahd8+d8T0APF16Bhj2LAaKyaOLyz+6eLAwgy3QeqkW\naPK2VxBUkGJ2/SCJB2jp6vjPuNB37y4xXo44ZFJkG6OvnJIyiHg24nqCR3mt\nvoO86qQwlSwYyHFWXsKFd9yZ8xzFrpAbGjUnP6CNO2D6wtbigVMdEG1GaWFx\nXIAWaz1tRksjVRXHMlpePpFaS/Ti2MBjg/96jnZaQi0BECI1E0PtjuMjjR2Y\n7MbjlHHUPN8P6gUZIJMxVPBdTyTvei5Fe2ox888y6FF6zO91VWYsnnHosBkw\nQ1WtXk64TQYVvmcmbDMbmsIUY346fJDyeSS9j+mKFc9fKGMsamrWwvLTQG+5\nmggSI187Zmgo8rG4FJKMNJH+Hh6/1eoSy8/yvp78reB2XzOXXD8q7WFVGosO\nJKKv\r\n=onnx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLhWvrDx6PDv17Qr6EbJcq/kfXcRpZHink3SLFF1JShAiAFhf8k4FOVwqKl4561lgxJyfL/RChQhaVN9ytpoYPeBQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.2bca2318.0_1598032348262_0.40152032538749416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.6aa47265.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-ripple":"0.19.0-canary.6aa47265.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7v/vv23l0ZRkHdjET3XqYv1P1+2SIm9NqZnKE0b3PIUhkS5XlT7z0qwvYx4eBhSjKxwe/MW3W14LgbNHn8KMZg==","shasum":"6984b7ff26b69c8743755991efa831c38c3301b3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.6aa47265.0.tgz","fileCount":17,"unpackedSize":101039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9oCRA9TVsSAnZWagAAK6EP/3lYvVx/Uxb7ufo7Xk5c\nAVVabX0D+XwPE7VfrkqDxrBVeBHlgzzkPhCDo/qX9RNXRG38POP5hmJVVq1b\nxvC+lb3oZBslighD9UsolhFzj6X7rnlkqjrCf0J1mA13vn1rcBRicB6KvUs3\nqga3iAcyEfyHa2FPPX6781F9QVkR8sQs05i4wcZWnnrIH9JJwy/DPGjRqcCe\nRkBXVJDnfizLPneIBFRkrUQJSj9NwtpM72qaTUDxmye2fojdQXwgh1j2Oi0y\nFUVRoR8KoplENEvldnSkE+BjiZndpOzrFWGNMaGcmy0MJmUwXnNrR44Y/QlG\n4gEqdWy3NnAb0waSkGlSTgTHgxy7/QDC6V64IOwpHEqNOSlH9Jzu0fNFZ/Jq\n60/qq1Yo3JNqfZtJhcpk9xIUd8Y6HdlRluCBMV4/m7xyxab+/qapLjfvzwOI\nxr4SBN7elyGFZJi7iwhJRbCKWMbYxvTTSY1/XLuQZPiIfQHbFYhK6EhYSt7c\nMaP8hjmUGmEUPpnLGr0cDBuitzPei+eW815sTNnwsc47AW5i3ZgbugGYtS2W\nkvszd6TuouUML4hMQDVHsxWtpvBbJHc414ukfAtekmRgS2Jlg+z5RK44tT3g\ngoCWGz9qCDc4FaX2VzBtS+OqR8IQOaiu1lDwFVfiLGFrk6zKUhNi9XPvloKb\nMDK4\r\n=LusO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmAWeqQqamJoT/vJGMCABlB1x5i4ZC75muPS6jzMEBDAiEAuD9E45yE2PEDhGrluWDqZ5rSQa7r0XDtVWqRNFnmMqA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.6aa47265.0_1598033768148_0.004765892847807152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.e7202a07.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-ripple":"0.19.0-canary.e7202a07.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-theme-secondary`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/color_018786.png) `#018786`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n`--mdc-theme-on-surface`         | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/color_000.png) `#000`                     | Color of the unchecked focus ripple.\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gg2mfeJBhpkgDJghoz+f6aCy3WIsbx0CDkK8C+jjccvSabGEgAVJbl8H5eFvAUgRVNDDQfKPOiIUCKePW+ELHA==","shasum":"064694111424eaaffe8566e3dd55df92ced0bd00","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.e7202a07.0.tgz","fileCount":17,"unpackedSize":101039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB85CRA9TVsSAnZWagAAmdMP+gPIve1QybWATYVsrJXy\nEaWQiTdftN78uKy2iXYUGFjXwjssVA60DjdrCcNLFrwHo6ehMBpHi2lPkLCH\nrnAdnN2DYFVM4Kznf0B4EDTN3i50BarEBexAIb0GdmC7jjvI4HndSk/bFANW\n47g4qRDu3bS1FrtDDA2IYn5WRaGOD0ywwRNlsa3pSdGWSP1jIV24ypuat0Uu\nNGVuL8NbHiwFuV6yyJVHjY1pVPfNqv2cijlLSo5hH57MrwppGWwgnF4H+TzE\n3qk7QDg5eN3HpxW2dvbGHWXwZYDiK9qI7syid12AzrZ0ZeQdrc/XVMWeVgyb\nrWfJMX33OaHu9P9nijdM+4ciArLA9GD+QfSRnMeGbBMuTt0KQCiEC8HdEODl\nAJPABpfA/3oFHYxfie4ZrBysaEQL6cgjK9uSC+ZXqHLTkCJlYfamldFoDo4J\nbezY2DCHslwYoaPojQ1ArddvQar3D/CguLh6QOihHdaHRo8aWIcG161RJ8Wp\nmEyTpl/o+0xxzp+v5albTkDVFWgGSW9G3QSzW9NHIXo3RWlMjtSBogdG6Z+H\nxZabv8+Me/OdBmbNjVCOgSwenPI++yS003wCCgaIp0JrfLLzKdCHGTUSK33h\nzAYNuKQ3MPvdDyodsmwpxzF1x4Y0vEzvYhSocKOAWXcrBBKHYdmQg2VNWazy\nMAGt\r\n=Wg2i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8UjWXPP2Mw+PzZqt3azNFCnqmQgqV+ROTUWK6XlMIegIgN/DjQXiZMRMtKZvm08vbkzzVPKVruQ1sD9NrcabB/Vw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.e7202a07.0_1598037816899_0.9819842278976803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.f208201e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-ripple":"0.19.0-canary.f208201e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ob2zdWhOtZu2JiN/TbiUc0GkPhuEMju/B8mGc+iJEgTey14GPsQC3ThTD1vIeLEDlU1jZ4VJfSqlRucwTGQaUA==","shasum":"18d0a9bb20e03a239d7e06ffaa6e9f9f55a5f3ed","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.f208201e.0.tgz","fileCount":17,"unpackedSize":101009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA70CRA9TVsSAnZWagAAM8MP/2XSzwDSXEJwy7dnjZHD\n1+PolNlrB/oCK8YBuBhpkdlGGS4G/DV1c3sR2BWQemrd7O9wlKXdo1Va2GsB\n4FxbOiLMvhdJQUjt++tKjMOA+mSRhBKVWiCc2JPlpu2RR16ipq5tXX2U1IwI\nyj6zSwC36g5sZodBk1mXWEbXOG1+zXcEc15yXJ9AvJczC20klC7HuGN/OVbi\nHxLCAlniMZi3DprI3D2uHcYD5DQo9Q6YA2QyXNQXuux3kPiZa3U4XZbzaqJA\naVqMSXLnxlvVrfMmSDqqMccKTtwloTKgPC1Fj6MmPnugX2P/WFNlkq94el4r\n34c8LD13mlj4uT4g7xVHpCrSgNPbGWF2PFIPIiVMBCbo09PVHN9hvzYkzwAO\nK+3KFDVd5ezymVd+SugJNK2nzILRX1GWuSd0UTPR/J3SEUwzaSK4u8VL9gFz\nIHiPe1p65yzaLCz6P0uaKc8jykXNBZpwOR8+8n4A6yinoaOJHJt8S+SnqyPF\nYPuB8JI7vm+NP8wuKoCXqHs3IyWDsmW34EAO4Yd5FxpPkczMNnx4T0XxnjZA\nC8S19MOn15IKRWWqDDunxLJXN3uXV5EogxGqhg1ofcDGsrnCr50gTJMRAXIq\nIFE5XF0x4vfGQ93MUbSPdJPlDPFPQQUcpOIHkPuKAGLl/HS3o54rFUF0DFO2\nf8EM\r\n=FKmp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHobyEZ8xtqlgkMZDUBvXMSo7fmDR3yqEFcRflpw4x7hAiBDuMcYrh2xDTEA2cz/GXNkoNjAijKnNk+P4hEDksHIEw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.f208201e.0_1598295795808_0.9120511850770741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.14a172db.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-ripple":"0.19.0-canary.14a172db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dMn2aOwygTr2pn0caSn9TDuCl5jA9Cjx4BCcnhPJ0Cc/3TbMsHAFikJ8UnK17hxR+fq3PT8ZGdoyGRYeDKykRA==","shasum":"152b511aaf9de3429ef9b78a944d55e6ee1a8344","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.14a172db.0.tgz","fileCount":17,"unpackedSize":101009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrnCRA9TVsSAnZWagAA5foP/AhnB9pcypCn8K/IEld0\nm3DukzlUf+mIQe6ATytvVwH7O5NvXcRZUHKH54lxr7oN1UUrEB7lim2J1aKo\naDU0WRKgDISQSyu2Zor/Si2YLn1FJhDnPxtZIuTKJBkxKBT0keIkWQTbJO7d\nI0tnqe1g4lMpihk+9PyIPxZFL5kYIoK2eJWHhu/g1ShveqU5ntJ2NH/dWyOg\n3GUbh9twBeVDmwtKlinh9zLMwVQu0w1rVCAWFaGOfnuUqrPitHXQUL6sxi8D\nAc4ff/fFEMRno/pvOWsxWTIuKCvn3qe6TaMK22Ji83q9AxFC3e79e57Rzqr9\n25WNKaq1Vblj+OOmg2I9IPsAVCF7iowGoLAQigRYSbe2DGZACKJdzZHFAcVg\n4prAr6h+16UCffza8ckX46fAJc6CWalosif39iyqVIuJGIFrXWT38bOt5BtK\ng9+240NjCoJ7EDdi8iI7VsASfe40ha0NsGsJrAr5SAVMNi2A5na8XMRMctL8\nv92IZvvLNWMc+o97u2ct8iuJJYIwN3bd2m7n0zpw+ztuK5ATZFzmdGXmxjhz\nlYEnjgf5R/QvUI7o9LtDIxlR1048olrBz/CM2soHXXUxSt6n+ybB6RA9icki\nyLAgwuCCpk/pLUCFXQXfKSSV0/l8Wb45Tzxo8M6XzcLxMf47ui8G2zHxVPb8\nDgl4\r\n=6bIP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQJT0xEAyBjSizs25rbbVYVk7dh79Y2e0SIYdcFIAYqwIhAOxBkYBsz3gvh4RPAah6/hNpAKTtxW74wWsELme9w03d"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.14a172db.0_1598384871277_0.7494321887992017"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.e6c1038d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-ripple":"0.19.0-canary.e6c1038d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a1c65593d.0","@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9GQJeo5D53Y954QJR2fPd+74cxQ4qHUnWJfthTKKYH/CC33e3Px69quVOP+njBNaLZh1Nl4xOWSdEDzGdkKL7A==","shasum":"840e6efe0078dcbb635eab8b7c544209a9a0147e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.e6c1038d.0.tgz","fileCount":17,"unpackedSize":101009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtlCRA9TVsSAnZWagAAbjIP/0oPtx9bs45kg547oUGN\n/APGAK6VuCIXxliHM72e34rax3Fsg/2WbH59F3k2Y7UEJyIJFIn5oReNt4dn\nx59HQqGBFa0In3oWkQmY3TNdS49ccW+BifNKKn9XJrc/0juRyZjKnuvqXqxG\nUh0/5ZOe4TpCJtKGn3LR++DKetG7YfOf1bLkKUFVoE19vGf1tBvVYJccXrYy\n/0tn+qtcJoUqKzxS89ylkyWeIIat+ArJjk+5k3B6CKGZawe36luD5rTe7yOH\nyFlkdDuwr1Xn7S64atHEU7bYJ2LW9EjeJEWyTmgAQmR4kg8aiWdQbX6OvqtZ\n/JnB6VINtBiTj4/LMYSRTm9XCrFNAF4umAPainfs/m+rXQ/z/XjJzji2z6wx\n5w778y2W9Gm508fkBtbA8y4bD+YqhKgSWruxnBAsmHw8pl2zlgdRj1U1LDYa\nn9vVvPKW4XwFGCq/twAbKG/YNe6EwShx7TxyVB8I/BHLMYicxlcQ9qZiwvWV\nX6nvVSPd7uNapwOxyvr92HQHwm0aYsaiv4E2R6blg1I2LPuBGtWly/pzwJ0P\nZCNPi8ckQXx1vyXRyr+Lyvw8pQcZ17wOmvxUVlF/MA8GhBPmax0lyrm8hhBZ\nO2syUYM2R4dHRxw82CFspl0hFOXQXD2qHPSfxcWNP98/SCSDYqKU4zI/bPul\nf6ul\r\n=gdg1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwykApcG6NSe//2rEQ163hMBXhU1/eRJ+fFgAsVFPH/QIgRJpwZyfUQqYYPlAqsV6jdKIXL8STY/nwIqfoj/X5v4g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.e6c1038d.0_1598557028989_0.13552025226464037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.34012082.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-ripple":"0.19.0-canary.34012082.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZaJzOuRYOZdFZ7mPDPr2PC7x283VvtF0rz9KKs7bjpOX/GH8Wr88QPTEnkGq6fojTog7skc+NxSoG+RecFi4Zg==","shasum":"463485d02653b87df39cc1a821cca09a82dfe1af","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.34012082.0.tgz","fileCount":17,"unpackedSize":101009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4JCRA9TVsSAnZWagAApI0P/00a9jrkZDyPufxGH1mK\nfO+MUkbjcO9C31m1T3Ri8nbXEekAip5HVDFbT3x3x9wFMSjEYGkWhl+eIu4c\nxnT1danVtS5Uo04MB8/qJytHThazsyuex1dDOBbE9GBtbeo3bOjfxwS5ZdQu\nt+8J335/RwfjyAuD4dA2UAgJdz6dbYuJBfZ49PqlMRr/ynJWA3uNXvQacZo0\nwFHU6xkc7/2HtuD5BKf9nCLTmr0+c2EG/pLCWODMnF7fdUipH4jcFaBPfZT0\n+9UmgQhUBj43ea9KtmpSiXOsOmxApU1mQV1VhStwTlUkUKprddijYdXMfGwq\nXWB3zjMwIwNznxHaF3MbeXKL4XlhAiH926SW5A/8DE+wtrxNzZhOvU7ea50f\nW9E4IUXn95y4VZIhe8bj1UW1a2tXh+wF4V0Dc821Ko1J8VEzfq9+P+riwg9L\n2f9ldXaYenGnunEgyGegOL+E4KtNUxy5GoEU2GsyNzp2nH5m7Z0dgc2qxgRD\n74dSiAtd0/Bnt1hIOu8sSU2cypyKsKElcvICTlWpUibKiYZ0JqNQQWGsNk1J\nX9nb3qabm8jLzzau+VCmdunhATJs/qIV3uVI1wcQSHbOTPfdqr14b5aJ+AJm\nMsOzhPz1yKp0tRdk9XKKGHMWuB0jBTVTiBLCnSnomPeLYhHzttq3riQSGfuQ\nQTc9\r\n=fpt1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMjDi0lgiWBFmy5bM0UfWPOOW5oMX0fnIm+5u7Tpp62gIgXV6tXrcZxhzkmqAr/pNbfHoNwiyECkyc4QBoxIVLQYs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.34012082.0_1598557705364_0.3401117461325609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.c073f7b8.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-ripple":"0.19.0-canary.c073f7b8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P9Q2aS79xoIxxjio6+2CjFTIM0GQx9aNLF+Ay+mIVqxowBUOlgXXfhJm94jvZGGK9qOJaQIMqZzeaiqq/Rg9JA==","shasum":"00923e850c4b3d943c082b74bc9759df7ee9f1e8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.c073f7b8.0.tgz","fileCount":17,"unpackedSize":103730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrvCRA9TVsSAnZWagAAoxEQAJ+aQ7aLdGQDhn6U+Lm1\nNk5YrtQb8NfYF1dA97mX6NLSnvyZtO0FMNBoOXUEIuB38ZsD8z4Any4XYtbH\nb7AKDEAKQzWSj7UZUs3P4/10rKf+kuMS4e6s/BMeiS71l1HLJFx0NU9H2bZU\nYZFDejX5WBfXAZ4NJ5chNBmcMBCf1Wxo7alawT2QL9/U+fbp28wBSDIYTiLY\noU6y4VaFA6bXVojZ6JYMC70GqLGjt8IoVgDIjGl21l4IcgyevL+ku+lXgxIq\n3SW2Zc8Xe/pGlsC+nEr/xf5DPwk+x/EsZ4FISipSr5NG47uu19k3eB1v3doP\nygonhG7PTkFADtf5pLJmauTZsbnCQhEXtXpBGngWYePT5UN/a2/Kk8mVv9bh\nHvjdYdwqYr66TrG7K029CIMfeE5xqZ7fzUKOwm5QK1N1sP9E5BaS1PfDnkVM\nxAE/1rfZ2fQVLlhIU6eY1ou+sqgG8TrywlSwDh4yPDC/AyE3k20d8TfEEH6W\nUVAanocmsug/X6jVlOav+yY5dqOy0NsEO6ZGDlvH8WGQ/ajeC3UsER2e2uqB\nIZfrpfnyvAX4kYfLVTomRC2q+8LT2nu3lS+zn2q3Zist//NljkxCVx3SPWIK\n8hj2GT4+Ufr55R1zFE8H50BDEq2+yp04EmVG2L2Nph3C4lN/2jiobi9ilgvT\n0mLR\r\n=QfFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERSkcoTayTureYG10X+CiKR0dYGHPyDr99JNUR7gTt/AiB/J4ooi6xUPg3pY2NDdYMu+OxFwTq5KS8wpKeb7syrng=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.c073f7b8.0_1598634735542_0.4149956835596258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-ripple":"0.19.0-canary.b7ae68ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NGhywTWjTi6r4kNIKAB5NhpYiB9uYDjmAvOf5s5ChQ5qm7N678jdbEPYKDb52x7/UX7T/4nl/WLUcyt937rHtQ==","shasum":"497e52c2a7bb22cd0adebd9961279f137ad1f526","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.b7ae68ff.0.tgz","fileCount":14,"unpackedSize":80133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7xCRA9TVsSAnZWagAAjHYP/1c8KwzjS7CP8rihqeS8\ndIWOVOVPrVqdSZDjuEjhLZYy6xMe59kk7UYtOfIEBA7DJWsw5W92z3dnqK9/\nMOJ35FzxBrHLRwPstP7HZ6wALZrS8EW70A4eGkyL9QaHxfhhhwUUTJgvSS0p\naMbvbv0ka4BM1Z26OPN9kuytDBlkQv6T6ji7O1HUePOIR78cCAJwzZ9GNUqW\nbhG5mxzNPyCo9jobIS4Fy2B6AV4yzfrRdLWMvXFlvHOl1T3Gzar+NoijZ/jh\nSqppvBv6xVZfW5isT3RiPYr10K60rZWZzRO/julSmb2td0IDn+DFSzo7WEQi\nfX/jEmXu3SbgaPoi15nTbDS9i8UIPMm4teVckt5yIyV0LJK1+87RVaLr79nO\nupBY2tXphcZgp+xvrbQbLCUUbsCTpDUt/98P0JGcAqHEUXBy/2zs7ZQpjVcO\n4D/jv7KgnXYdCLk5+aSYEAl1/MsR9ojov6uU6nFy85LJtMFUqdZqskOwqsdU\nhmbpQXXy4SfcOkVMomDw7KvibnqIQ8vv0skEITqARuKc+xN1gCE6Ot24Ksy6\n0j0c6ZsrT5v69FttAYmOQwoIlI7ilQl/3V23uvwuk1OFzQ4KRePrEno5USgE\n2sdqFilU5n3xz9+myZwYRYWA5yWm68VOKau//8bVGXKmXAVbPGUiN5SXNHaK\n7r5c\r\n=fuKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWpdm44K/MGo9lPereqmmAdKYK7E3+7qO0WNqAhaLauwIhAPnBYbVPLHR6TJyVmqy2dsZZf1jgVOAXJunxMiYTpcih"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.b7ae68ff.0_1598664432686_0.24267562532175124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.697e3879.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-ripple":"0.19.0-canary.697e3879.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8R0ugBCi2cVeQgIjU2XUwmENUFz+ydwmQqxvp0aVFEnlsH4F180WL/JoUkwwQwE2gq2YFp/v9E66HHYW4Cn+8w==","shasum":"3e80f5bf8d7b0d6db5eba6327ded29ca3ad6caa7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.697e3879.0.tgz","fileCount":14,"unpackedSize":80133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOdCRA9TVsSAnZWagAAFuIP/jksyDIkEISzMps/1L7f\nX+MLe2thcrRoz1kvR7qsI1eC//GI2wSYMM7sw43ICmYb6CHTkks0AREwfMsp\nzeqO5VB/YkKw1ksWVVPWFHefCbVz4m/sfyknhsYNnOVxTcKSigHVXXKdlX+R\nvriQHdhSKF20NnZ38MWSB83LCyMqHzZnVdMc3Nt+NpzmEg/vS4X1QraocClP\nbLrpvDW4UF1yVYHxCQXA+M2JC3H9NsuVTk8AqnBOfFRJ7hh0GOE39QJeq0Kl\nn4AGoBmcnOOxe+j8yEsbb9UK4VSdbxKnZTSJLP/4pWaeoWv7LE2aRmG9YFy8\n9FbiQ1nwW+wt0Mhf5XOH4tiRpYrgtrUMxZNWzlYWgDDOIRaLl2sru2m+iKQh\nUeSxFPSMf7IZ10xfR1+AL3HfsuIyAJEoIRWN7vTPH0+wIfF4ZejnqkoalYDS\nus+vfJt4LovTLj0eQWiFMUhCqkLUGGZ+KE1VGYVj3x94bbdS57h9ZcpZvRt0\nONKDpGiSmVb1KULIOcXCwafcAS1NfRuRCkerLWc71nJ5Pb86T8OUC+gJve3B\nzgIJnr53W7XsWiA0h11uDgglt57BBvfdJFjK0hZuj1Cqpb8j7IWc+7WYryxl\ndLynE+BSQSdXOjVEbVJmeW3WyqoMyl+dKo2BvbMRqz/iPl3pBG+0mdXIrvg1\nRkzB\r\n=rtPQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGUicgIDWFycIC7Rm0dVSyt9ytQK6lRM1VI1n04QXnTjAiEAr4q4+/bcdXrLFzqYAA8eXcbNT5Z5Q21wdlQr0duWDe4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.697e3879.0_1599005597147_0.14051532172043824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.eafb7991.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-ripple":"0.19.0-canary.eafb7991.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-secondary`                | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n| `--mdc-theme-on-surface`             | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VW7OsvfUhRpIdrm+y/+Dt3crhPnCDhulBsoV4+XnCloDeNg5R2KN13Z6aiMzbJDZoOPQkmoKlmFbvb/Fq+h1JA==","shasum":"7a8bc7a84cd9f299304ced0cd19a8aa2b08cc59f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.eafb7991.0.tgz","fileCount":14,"unpackedSize":80133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDvCRA9TVsSAnZWagAAHJAP/0TURZwMP/OHlSWSGpG1\nQyQdKdQw6FbIM/QfJbKavDoEvXAOmvxv2v0BeH3Lj3iuZW7mOzaEmDoLj9Nq\nItoSiuTrFeyehiF4hjZitGarbOyQ020lnlPplEjdoAWWES52Jdk2Ydjnt6NR\nl8VSctdj2OR9BY5jojKF4pUiiXfaWBmThCZXb/j6UtZj8nhyzBABeDqJP4ET\njsGhyUoPsTRZGbpGGa40gM8P7isPvciqy2DjaY4NbVnZ5tE2OrP5LaJ1ZOPe\ng2OZ4q2VwhV9Bq3wsjhdku3p4fG93IaBzjNbKJQ0B76PWriZUAKNdCysBgfm\neo3Qf8RUg0ciZzGpMF+Ubr07bVbXixY4jZOZXGiQTCAPL4RHTPR4llIchVdW\n+mIvfE3PvBCEQsaroiUjDmbpov/0/nyhhUHP24J6L0rVU5xEGPh2pqiamrfK\nv4exDgpk9ts3k8hAmK1z8k16kjLdff/VAgWU72vhp0dpDUKwxfNDvZfiLww9\n6BrUVvIsRa3WN86Vr1SxkzdJnyY69V9qcj3RUNe1cvE4OIwYXe87RdOodlk+\nHxxC7MTnEuMxDsGYm/3re4717RNIsJmr0gpvgRveLlHh+lHEOG5TjFKmlGou\n6yLUR+8lcxILs/4CmeRKnOaoL66SrGYxZ+pTO4dO+ZxqtekYzSXfN+jU5Hqq\nFQNj\r\n=iScQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClDOpYvP+yOY1qR8DDM3vo4oJy7wzGZi4nOwgwmFvHkQIhAN9aPKlYQ7sVvN7TcjJjKzFFH+IjfcuFOF46Ow9ZBQ7F"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.eafb7991.0_1599013103372_0.478673345876637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.606642ec.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-ripple":"0.19.0-canary.606642ec.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-awN1Jx15AToEtOmvptprwLULlLrsaaCUswXqxI8Cfzx/qLN0wceNxtKZISN0Qk6Z9o3gGdhX0hNRTmLMv/ErJA==","shasum":"ebbf9f4ec3e5d4044ea2f7c2854846806e4d4d28","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.606642ec.0.tgz","fileCount":14,"unpackedSize":80130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAtCRA9TVsSAnZWagAAKNoQAINlu71sht6CFhqwQ3Gj\n8ud9oUzduebKFG+Uk19u6IdteTbZP8Ayn6N1z8rosCb6f8dMUFnGswvQ8P75\nwEHYl2KEH7+LdVXTnioXlvjaFkEIk/UP2TlZ7veYXFBTEgRFyPqxHePv8UyI\nH6bRXfOkXg6AH2TPtmTyIddo/YEQ/K3cZp1v5J69+yj+rP+aUiUVKjtyXB1k\nB5Xf2YfC97c5xsqJ7e5lq/a+mV4YeQSHpQvIzi0qlRde9bRFKOO4+F0SOrlw\nrXOEemMec1WxkgcjasOrv4cuHlybioqeTnY5BE0gVm8cT8a8d4IM4NABpqse\n0BAEswmTgg36dUeV08TqebiAWFOxYU6RQv40wZAanZ/RZfZst3OmhKQK2QtX\nAGYOMfhJqazyMsedPT/JqubVqbbVmKP80jF0eeT4WY9J9YBngSrkyDSZBIhu\nGvIGC2SJgbVzsbrMznk2Gw6U6HKLcAZg15YGvzsa+W6Zol/5sascboF2+qAR\nerkWDuWXIWR1iW7QLI5CZPmxZH5jdwC5tDiRShDK8iPYgwkPj/ubKfC8yDNG\n4GvWtvNN3IYkwJpEaucC8ENcB6kAF8gEH4DdDziekd1zElv5NWXt0GyLwHWb\nlBa9k2Z3iGSm6ox9777MLBQmc08qzlt45aHS6RxxomJQCFkkE17L3xMga2OJ\niLFz\r\n=dKuP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzxkvv+FRycN7y/1cwdrkR7Vd0Dp3U4kU8+iz3mEdTbAIgQWhFLdZ4zBS8M058Oy9QHbj3SLFE4ytZBWpLqEINiaU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.606642ec.0_1599082540761_0.4110365832279499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.ddf05c42.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-ripple":"0.19.0-canary.ddf05c42.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-H43D/RzDSPsZTK7m6iDLJfJE3CVA1CZIE2ud1adL3I9fVCAGcT09XktPUqmsJgWbEpxD32fWnpOHNH6IMPgPpw==","shasum":"ed05e0d221525c1ad1c258a70b8bb97e316d9b1e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.ddf05c42.0.tgz","fileCount":14,"unpackedSize":80130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVGCRA9TVsSAnZWagAAIcIQAIfpun5G2ma41u/In9PM\nrpU+RPkG2vk9HlnPik2lEQquS0u3w/aq/mvfuHv63U6Pgq5AfUMBE07fPU7Z\nHZgxsiEUFW5s1UVzq7j2YBarhDxkn75WP5bNgH7HjkmNksSTb2wK4woSp4nI\nMZs/h2tt4PzxJuDAw0xd7E/DNcf2DWTT7j7ZY5j7yAU1lCeTYEzl4AkdbE0z\ng+p90VkC2iyLo/djDzCO2oOfN5ezz8eogNmoyZEFaJQfyfU7BJYlXPjoz9At\nIDjk+tpGep3qDwYCeW9ZhPV4VfJBvhR6DRqONO5mGZyvtFaQjYJRKRP+4REj\n+wcXGjtmvdnhTbbCiMwjmy8qCbXfOA4pH3ItRThUH+TgfVBrzJQnqPVjqrd9\nUNhFydDDXs3pFWdtRMYCs0PS4aeSf5s5G0Ot533L0QOt8LIbfhV9LhyTf6Zh\nLPn9glyje7adpw+aHzU2dq/TohQTDHPd3AK3v8QcF/abma8avnoMKQ3gHyID\n0BGFAyhF8paqrdwj9nmqV7Yo36CAEM9cq4NKUppSvDQGggvub9PDcnlajCgR\nvRWZxIPA1T6lTnCuZ8MAIvRE+ljgHJCw/q6h38hkANOQOxkjHtw3eU+KJb9r\nJ0OsW1Um/EjM5gxD7AJq7YvBuWJHr8XkS66SNJ9Px/+HKMGimzf1HqF9Yh0B\nmHve\r\n=RA1D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpC5RtLVEhXd1u5PwhZiolrMDVqmzTLipFsiiV+YTRnQIgXkx8rr5Xxe0luCDoP1NREVoG9MU9Hvu4iThX7opDKnA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.ddf05c42.0_1599141190060_0.04564172771142516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.b889e6dc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-ripple":"0.19.0-canary.b889e6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vLn0ZYX0uYeSOycUv2RHxLYAPZMgFwUlCoKfCPPP/f+ZGs7LqVut+4TXZR9H5sWNnRcbQi6yS+V+3Kx9EeaFFA==","shasum":"940011fe7cadfc86ae3818cb3333b59e5d1c46c6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.b889e6dc.0.tgz","fileCount":14,"unpackedSize":80130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmICRA9TVsSAnZWagAAdBcQAKJK7iVMMAxwTARL8Mt9\nhk+d89XgxbTyDPkGEtjyQJlIRZdv+QriwqM695PBjO7uetgT5mrg4e5BaNWC\n7stbYAhIRulqbiGfORfoxxUY045hHnvlV8lIFgYVCz26rgGh3v4jLqQW4OL2\nhud8Gur9W5grprrixSHvjLf+puPVMwIn6g1EZa4lanmiuz3vHzMh4DLVRahh\nhUqXkHfUCzJDC4DjkqH9+6foYK6Uo2tVIWyHEq8aPvIKZGqYI/HklaM6SiFc\n3O1rm/x0UyiM+nY2vRCkH/nF46CwVYb97D/XlsH3cc70i6Ocj1JJ4PM+sawo\nn27VLT9ZZfUcXggRFD6yfSuB1D3j0uGYAmc3/XxXnse0szF9tiGdFB8fqDNy\nQ2qChTSVQep4Nz/I4nNx8Aryq26GrjFcdPNp8gRGe35eUkZbn+P7pFC+e499\nsFSdMRK0n/ZaHvSW6vQPKdRFgiqtEX6fn+Q2k4seg/ihn+JRho7iTopbDWys\nR3f8D+Z7YGR66eWVdi2dw7kKXY9kUJPSUHfnV1p+pwE/PtOGyageEPbCkhF6\naXgxKZZA60nqey6djPgE5jQGtXdHMwbPjJsdHWYiBN8we7p7Mc03nILqBLze\nJJj0vtRVODIh7fUEmjk7Y6DHQ6kysVcJOkEIwljTbW3mYS7ayJhvFrjSUGrS\nBldR\r\n=kw3i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKFJViIRCgesbt/FN9RVQc9qXLMYPvGECq7Mt/30UypwIhANzV2FsKNd/3DmhlXhA5lP7pbtPCF+8zXHonuj19KXaj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.b889e6dc.0_1599142279832_0.1420573321059242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.aabeceb0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-ripple":"0.19.0-canary.aabeceb0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tXbxBo0LM/hVOx1doP3qWvIFCqE8N9+JQ7kVDBbPXibGrtW/NS18Ha93aRpmFlJX+mqNPwK9QDUOIZT8GMPTOQ==","shasum":"2ece6aa46b1962456f542e8e2e8e3a7c69ce9345","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.aabeceb0.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUq1CRA9TVsSAnZWagAAGZAP/jjhB693eZZv/0IgYw1o\nF7UFRCCokrgf3fRpAdxvBVLwIO56/hvvI3uIFzFLS/R8zcMuzlpL1NS348Qt\nnKtgFYQGv5QqxIQdR2YlGhmy+ZnKpf2VaQhn/ZxyP549bBwTFxf5yEDp8vAb\nGjy4VsTboZ/HygfkevdqpRa6vBmlCVpXQ0gl7RxV1SeV1r+WSPC8hu39+zuR\n0VCcG6yip84XApKs9LZqRjN+SSVf0bIY3mPW7wnc/hNwihwFyeMrPoZERxt0\nTQPZMnd/vE9ZXC6fmzQLXXEUyo1hSLCiHVtusC08ChU4KO0/Gj/zljuKWTVw\nXrfDKCgGfUjLc39CETyhU4X1UY0aUmGDGs9B/G9Jt7DHORjbKdtW1nZTum17\nBenzg/jbjhXlWD60hjpnq3HLF3fTgMEcXlaSQ/gjUyXDnfHt7PZEgnr5EVH1\nmKHjPiukFfAdXpDqU43B6BwuNHo4wHKMkzw4QNpNgRct4OvHhEeUXONi7+sP\nlZcUD0hRwFgceUeqFlj2txmfGwDJbuWXDOt7uhtsp0OlJNYBtVMelBe+iV+q\nkoWv/R0GOo9YFHLwKq4KJ8H1a9oChPtJMGzQDu9vHEouOWtWZR3SkbVqrqxX\nOh69j1sCqXP5sfwNTssSmvAdJbWThm2tzRyDrb2ey9/nUC20esx4jOl/nhuo\n2zDW\r\n=Z0tX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBQ+ri9FJB0YBxvOAupWZXBP2JH1e7Tmp9kMENpQMzCAiEA6yeO0ZhNAbCAUCiZIMCoBvrFv8V47Tqq0/TMY9lCedI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.aabeceb0.0_1599163060585_0.0013652858485513342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-ripple":"0.19.0-canary.d8cca3a6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-EaXhQDlAn0Zun0+dQjfqoJdB4aO3bUvLS1geldHP64fJGHrF+lkkG62efRkGXuu2bfbCfrLo9Q86iPq5dvkM4w==","shasum":"3ea924d3c419723c8e28c7efaa323370a34e1015","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.d8cca3a6.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWC8CRA9TVsSAnZWagAAEnAP/0EZUG/zS/mZ0GGcbGXO\nwotkHBL37cTkUheh68l3Ob5z06mhRow8B3Zh19ZnEdg6H8VkBw+rtc1uX6IR\n5FADDMqaPwPiKEIYPx3iIz8VKwsarqykZPBSXCP9FnAVmMYDUVFxN+9noZkB\nqJWBeuQ9kQa2MguiHx3aLF4JAl/QoranGddbm6g94GIWVlveELXfTsEhDqa3\nZU/NXkqHD2/Ob1MiS3tCgiFxlCT+P3a/sP905bxSM9yq840klINmBkR2bEPt\nL4o++qsZ2UJRm8TGq6y2YCSQ+tphseL3oTJBbzCYk88scp52naBxaSBtyegE\nFwhIoF7dTy1hCUiauNDKzVT/axAD6dOoSSL9/dQinkR6Y/htcG9E79GqujGc\nZN2Y5HYfZU98Y0Isq+aj4xVFMvOh1bLBNrFEfCJX2cjTthY7KHiIfIferarH\ni2KMrthtzWQPREI637QHt8CmmOEyJoE4u2QJn6H/fb3IxelEQhM9GWlLZMA7\nslIDiricb/HZ5O15cw6qRtRiEfqEXODkaXFEHZs6knRvfIJ3c0HnpUazwLhS\ne8cTYV7pbq3x5eOGkVMDkXwdt53Is0PdKSpKA9BYWAHVA6ChgySrzc9rqFo9\nt9iOZXkmmI4GJ+rGCowjtHRDkJ15pwY1HQcrMn95BkaJopaA2cWIuvykI/ZQ\n8K+A\r\n=KM/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcqWJpfFfogofZF0trkWFhIV+5wZQF/k5sU3vgVk61PgIhAIzTP90wbdU0+25kxocMpZitkdojsVavT/AGHbV1IS4M"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.d8cca3a6.0_1599168699702_0.5724952525063158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.26d34b2e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-ripple":"0.19.0-canary.26d34b2e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dZVbUVdD0DnZpu3QeGItFzeE7VV+RO2hlufrxNs76sU8mA4dBx/G2knNV80Godyi47XpRSt47dvLAXCcKUxYfA==","shasum":"046c6e69f1da261256b01f6bafa133e8aec9bfc7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.26d34b2e.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWanCRA9TVsSAnZWagAAA0MQAJh23Lf/MyFWfbbWIIOt\nOD0G0p/jl/QhVDSN2njORosyZ4RzgysqXxeNW4VFlGAjgvaroWnrJGN3jS0J\nnoWoE9YUh9ALGogUyK49IkRZePsTKLdJvtHKiWRxUEgrjzuDuoe5kyrmQc5O\nNeMKSvVNhPv5jbwSs3S/eiU9XCN0k7zbqjH8wPLfeDeFP1YK4Nmuk7gjAfFM\nXnk7T2n082JRhV2q3l1CYCl+7A04SmD9pRoFsksF0yZcHSVeAHJ59m8hddXC\nR9nyHlxVvElikc38y6EFNUT3z71pwOagSU1dw06WESV23q2cmbzjxEoVSDsH\nQRecDU1jFTIkkx9o1X3pDuZb9yMQ8LgO7GEFjt5qos0Xj6t/RsrfhAcgdZxL\nXe0M9cwrCk0qRQ9QymhBlqg5XkHa/m/GSaI3UaC6OL0LNeaisl0Da4r1h/TD\nxLfuUdae8n+EKdpFa2pMRu4VMN9twTNSwwfbFgS5XLud9z6ojMZe05dmO1AL\ngpbl1q81A9PjAH5giUUjxMt6WTlaCatdlEcJecL8JgXYyAVIf0RtLflRF64Y\nKSoHPOhXSu4P+1wFZGDaoBOURJ7Wj98e6KvAvUZkuQGcmM0XXBfYd5dPRczW\n25PjTWUaWKujHZlFrgCRly/rZAcSSEHQTQCW07pqikuCwZ1J8TJKfx47QCAH\nIpzP\r\n=oP9a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfi123vL77ni7Wf4c/kHcV/3itJx0BrY+JI4njjE6pTgIgdfjJyT1EDvfbilN8aJBfw8GRTp5wIIZEu2IRTYGnSkc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.26d34b2e.0_1599170214742_0.8399563495370441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.a1c44494.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-ripple":"0.19.0-canary.a1c44494.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0W7ht2go3McpnOgpeLJpEbLy4UrFTTEjoraxoZ8S3ugQmOQNyirrAv72a9k012z9nLM2a/VQGwIfYzBERgfyQg==","shasum":"fa4e3b3529ef761c6373ea938cdfe08eb667af37","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.a1c44494.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIrCRA9TVsSAnZWagAAPLkP/05FXoiUT5c/XaAkllfL\neRv9Y0UPVOAjB1sNMr4p5Rezoj/wh1jsmhqkNL/ijnSypvjcU9ZXQ4RWDbzh\nRSb5TpCDc0fHY/2o2bfhaWpInTyfO6jfDjJcnbiYF6rA2m8cty0COhMAUXHJ\ncxCfRSL0CQfcHg6qqn+pRlZ4pa0iGRs3mwNmQCtqOJNwhoPK7hvtYpNg+IXi\nLHOmRQEsVTki2h3jTLWDWzT2hbTsLUg6Bio3Vy+p/dWJ/GK2zBIghouuQnIO\n5bV4v2bu39p2gWinXyUMtQ1cVthW6THoXBFTC0pNEj1FvcQ2iYpT3PHcAjfW\nRxVv3EtIg11FVTgvNDJoZUJrRHh+77+T2avNYt6baDJd9n5DcfwZ65oqxhiJ\n6oX8FN5QlHqFxsgH08ABI772PoTrAa9UjRi1ehbe2h7dqO4AqrDH1cig16SJ\n1vbOVj3+wSYZHh/tQck1YR/w7jVaFZ0sEix+Jsy1puRezEi52905jIRxzRDO\nbBcnSVUSv9gT50Ojqcm4TBCY79en/mlFm84h61FBEOHoqVzjTNPVjeDOovUs\nqeUZFLMPuokXxTXfw9qxpT/ZJ1QyU9XSubvDZrpZcTueY/e+H/0EsPdV6GLt\nmHTRHEhjbEymx5XsVGH+/tisijemaTLN8pNRUDcMdeSaaw3JoFiTvOXxBLW2\nZJlj\r\n=8Qic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWeTnvan5DLNI3pMLvbGKQuVxpR1nMvxsrt3kMsdNl9wIgJFRNzuXyyPKhjTroLcYCbSU2UwrCZxga/rwS6LL+NeI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.a1c44494.0_1599689258998_0.6910271217737582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-ripple":"0.19.0-canary.be1cd1e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jGbpPT3JAVa1rszSbdwmlbxguIqjrcntf2CAiHf4VBEsK+gxqZ16yq+7qHu0VMm+iQHSXy31lP27S8OO/Ahv0A==","shasum":"545cd68a9ed62254d6713eed2f23a9b32b033818","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.be1cd1e9.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcmCRA9TVsSAnZWagAARJAP/R9jzWHq5VhtGdMYv8/B\nyFWcriwj0ejy1xUim3MlASXNWDE1aLIl12/S5YxjeBfIZmk0bHwtybazJQ8m\nXU9DU1LaLpHDBnEL4D9FrfCXvcvm2kAc69qp7sInNzWjphguFzkCWg2AB9ge\nQ/QUZPKIHx3NQ+vZO2vKUGctwcD462/oaUZEJJYqOgYwqmNxDhajVD6vjGoy\nh8r5EHmhx6GsHXR3/cPvnMa9uICg7Y+V5eOl91zj4Sn0OpvwxqXAdPnoygKM\n8D9Y34rpJZ9j2ygXjcJyomCw2N/R01t2UEHJr/Sszl4LnfmSzpmCoo7UjH5y\npdqQmH5qv/lsyWJ25VcaBl8fBxwJcNGs3MXy41gFaKFhiScS85WcZ32IVxrd\nbzmF+IGBXH6486is82g+S3ewwmkhP2i5nYmjm9tjPAxExykJzt5WriheAwgN\nsF5YeT5nrIKOB3KwDYbwBN6W3ablLA40+L1tVoaR8ArOXbkaJ6u5QZj2hAn7\n09WEQmtPRWrC4D6vASnp/ThspnjNrFatPF21Ncri9WGnt9+Xz2pWtjOuyNmf\nAQScwdbYFEqQuoUzb4RhSfzyUgFbRFR4VqbCqVjuwXfKvZY0q4nHFTzQv8Ty\ntTuXz7RTfM1BKSd3kBPDFxPzEwR/RWX+aLjkqEVJa78vEBeAVG7xkiFnUxPB\nVh0Z\r\n=2omJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdn8fEdedi940CgKvrSAil8H17XDyHb68i7BrHmANC9AiBBrmNQksl3souUpVKw1RMD63d5UTJ9CyzNn9A+AdyEeA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.be1cd1e9.0_1599756070160_0.668590408540277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.f094c0ce.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-ripple":"0.19.0-canary.f094c0ce.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qKPDqzAozuaOkDPFrq5FGlW7vlI2iiwhC01a33gjUVdtk11L5we14jpEnLMl3Ibr7496hD4Ceqqp9BwnfriMcg==","shasum":"26d524988e642d4cb02ad0b62e03b856f7e5d71d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.f094c0ce.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQTCRA9TVsSAnZWagAASF8P/2ipCtf+KwGM+vSYMskf\nmLdI9qrL+vePEW/pxmD9Zxb/69We/y7ivA43WdK3HYy6zR0Axu5oyw94wr0G\nWX+mC5sfMaLYZ5NjL2Dbp6Cj8jIKqseit5AwZIZHGr1jGMZgutgi2G7hEZUR\nb51xwmQZHCETUix9/N2ety6kwsIJIzUN344Fmp8gA0ZIuzEX7wrmyMAxV2uC\n7SjdxHjEyIqjD+AfinIRYooBzQC8+YWlO+Rh4BxBNSeN7oDiOBdgwM5/TtEC\nop6YvdtLn0F7GtEfEaxA6zCNp0gy9hYo1APoIqyuP2juu9qrFXYOsqVdKOCW\n9JlfIOC7eMxI1NAGZv7z6L+VxjL4Eu8rRpsaUxkiJNMZbt7CUKTtIaaUfq4o\nHMaQU0oWAaE+QKN4+dA4A8Bwlq4wJcDY9QMSDV62WI2Dwsw5otYCmBxWGeZi\nhFHNVvxx0ujD7FCCwSIdRfUA3l7190qIH9rGtosuFPvd9QgJL4dv7GkZWvyr\nAqoFkbBOEEElkQKp+f95u4lVY39X+2Hg9UQcwDnAnNh4VSUFTsbx97KIv5+C\nj96CfPVFPxF35/NwC+0hhfRdO4PuiE1bilk/aQIRUOg3v2gF7snW0MW3XMk4\nTBfkZul3QIK0NHPVfnsw+M6BPvCw975BdKnMe/8TVJzZmtLQnjCt0YIt9EKF\n7+CF\r\n=upP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAu/2grsymCJ6SrFnrY0Ca7mMGURwjlTeFnA3DREgRvEAiAsuF54UhXeSaBY8otyzOIhbm2cCrsqF0LXKaNJuJAdUw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.f094c0ce.0_1599759379404_0.505482899102693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.c1261e7d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-ripple":"0.19.0-canary.c1261e7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dCrcZc0EDChBiYhB1TFcdBMSvbS5S5EiPdnpzRTUN+PS5KaOKVoN271KMafGHCIbGJ3UAfjwWAwfjo93NPTdsA==","shasum":"789a6c74b5c3b99439569e830478a71e4b6ec1b2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.c1261e7d.0.tgz","fileCount":15,"unpackedSize":80822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBOCRA9TVsSAnZWagAAE24P/iZV0gT9onx78CGaLqtH\n7ZgTy5CTLIeLrSgQD1WKpYAVnzyjMIjKqxz6K/PetOb+xlLo8t7Z0cfYDkYc\nxe24I12h8FjL/JiOBCAhbzWvb5+pXvHqWiS5kIJUCEw8fWZmm8k2wYwc/OsX\nj1DEYVB3ERWMc5iKWIJ3QAQTLryBr4eox3lJQCkoZ30oxrOYOzlyMEjegp0j\n4LP6kTR3JBDagFav56gkaRThUJnLGizTbQ+3O2XPMz+wADUfmD8XR8YRFhI5\ndKBKNl3bO3QVmOT0Y8BSQQlIw5ixD6YzL2Dh3SEHi4fHPAVmJmSe/4m1oLUx\nnu1f91/vJzHHZToP4btEzPDsPJNnFwCJJbZ03EnDtxaHcXSv1raR5Li97RRJ\nQYRSCGCYTzeUmhj5kdMBKSK1/5rpxamCGoYtbxNn8sFrxFAjCxoHKQq91ipJ\n0tQrLVPY5JXdZOP2pImZEtTIvDiwRx9Caz5/i/a2HfV0ibMwezFGhQa/cZG/\ndsjRSPKe3HmWNTOsrRB3FJ9SSstkdUrU85uY2dusZjg9aDMC59W6X7iXC5Rt\n/te3APyYNlyelQigeA7Rcoyvq7hrmjuX5v+i+wGzNO25uV7g7aAYBp0narOf\nMwH/S/YUvor6GYz8D6O+v4RTZvphTdwBv8GLhP4lC7BoaKspXk4XStClIrif\ntKHO\r\n=Q1Xi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEx8erYvELrFhnTvWCSEhdFAJ1iq0+m60tfQsl6Y5s7xAiEA3NyrtoeLP3W6gTjzHyLVvLNO1N0PvgxbDWK/tFgbzqk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.c1261e7d.0_1599791182021_0.05017890910177125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-ripple":"0.19.0-canary.9b39ed1e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gsDZVJz2z+ZLPzwfZiwnFnPdenSZXoQUW67Qt7RFRKKX0BnAFOCbeAFnPk80ZunmZKdgFRDnj4VeNAy910qTww==","shasum":"5c5e8bade7c181de6a3b91388138b7db611a5b69","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9b39ed1e.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCFCRA9TVsSAnZWagAAMqsQAIFgmC9vSG3RFGyGkxo5\nDGloj4MjmhS08M52AnsSmXVX5tgxDlILBcHyILHjWPU4gVEYzWbfIRLyBdzZ\nF75x3Cx0wiCwGiQvuzn+LKR1qmkvN5hkfdPwIE8RoQF1Y6932zuxJKYniR0C\nLvIy+VinBUvIRmEccJpdKKDMo+6w56/Tz/9fqNscsCOPcGImPomV6Y6NFpjD\njpueIDMXp57oKFGPxvB2auhlj6tLwM72veLsfpAMT1+AnRj3l/IwgqlFBqaL\nwSLFVNRmQQVJuUiS/tTp8WZKrqHcOdDWejireFFYkxwU2SmbGjuhiq6ChxAk\neWtxNMG6FEHCoBOCtb5dn9r+JZkU0Gy20U7Qm/5Vbf8W0FFkY3bOXdV4lMju\naHGIjNgOiS2iEGvabggEhKlV0pDpb8vrKDPllQ2i3/xhp2D7inppjNn05Jkb\neVJc9mb3reIywxxkUQ0XMb99bkb9S6awYIW2nHAZZsCTeFaW/JX93BIdcE6+\np2i5WAgPxOvaAjGcQTSdo6mo0gu4BKjePmzuyLR8J87BCEXTPLl5EmRLY1Rz\n/b6w9OLwGCaW33fUkdIE6jcqYrFeAz8cKOJzc+NO9NU5eEMT1Ifkdzoop1jP\neWMMyPdB6jpooiztOlYOiKwsv8SCdRuVbFesaXu2DKsnE15/dc3lu6EjJfyw\nRvfw\r\n=1oOq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdrarJ5fOjYl1LgIkM9gd1zlNxR7E59vNRs6seBbluAgIgCe93Jml0D5m/m0xtis39sTJfECtOzPestjEBtMo8nqE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9b39ed1e.0_1599791236688_0.06616785214688603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.e67214b3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-ripple":"0.19.0-canary.e67214b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0W9Sz9vny24wdjFEqc6ItlmlKWeudYs9pNpX0X2AyBAuwCcgFI65A01ghrHGdkZw3sh3ww6F1TCnUuzAc/i9pQ==","shasum":"e8879a472ded42980a0299aa9c11384f5dea4b0d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.e67214b3.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGICRA9TVsSAnZWagAA6FcP/R2HaPIj0LGKh4cAPghk\ngu7SDHPKQOnqokFgnGsWdmQ7kL4fUga4mQHYJ9iFQ3Yg8KwLlnHJZan4kd7E\nbYkEFud2npKdtQyYMYKU+jNGNNyuxYs+zY8+EbdeGgP7H3HD5xAqKDqdxUei\nHRNmO4J5YO/lJ4/R66ppwODcLL/t698claVAkqwcaSUtjnzpplzhlyIEJarO\nZyXWbxmqOxjoY2DU17IEKKFzTq5fM0iw+Qra7qc8A9vhQtRdhMgNY2875oUn\nTiG5kNYOtoarw/ewkgslZUFvaSTji6AFxs/AaQOFokkYkZoCt95Ci2b12LLS\nuyBUHdOKXj8fHmwzZvtUzB2P+ZvPJZYUCaCmKL89lhZ6CQWy1S0Cpf5gllNP\nRMPM6X/t2N7/l45ZUg5xUuCSFsc2wNwiInLOs1F0WfAM1ia1KAPT7vOKpcMF\nsNxjbIDX7nw/MxsVK6VrIAs7py7YDbNWlN7Cx/136YULQH1ixKJOVmK0Sk0g\nKABaVSEB94r3z8pvczF4ZI4+52bVToFL3Ebiv0x28orYRIWU6ebRWMP7WEQJ\nn5tNfUsf7SkSroEZcbj16+bjY6JmrCrPyU4ofzge/cqgwD50+ovqkBJJaK49\nhCCA+YS2yriDvPuIvqY4oNPRQHChHHZ9RmBqLBq0L0k8XOPB3ndmX6xBCE+k\nDUtJ\r\n=BsYx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB+r0uHSEUhsE0Fnq2o+KQA+Agtz58O3ojrweLnMz3oAIhALyN8ITlSwyA2j5sdRhDN3n6AjZcslVj0SlDa/nfEasR"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.e67214b3.0_1599791496503_0.16112672886664936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.36f5da28.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-ripple":"0.19.0-canary.36f5da28.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-73iEUGaFHGXMjCqhtDNJV4R8al55uT8WfG1MDpATqOmL6xY57EyAwyRu3uMq2vDrITuEf6N4H2FBUNK4adHG5g==","shasum":"ab1144abddb8a4ba39830fb8e568d86078430d9e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.36f5da28.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIqCRA9TVsSAnZWagAADzIP+wSMXJoWgW5OcIbLOkFw\nY8sAzKcAHBDo+O4wMv+NiS1YnUvWziq5II0DFJh7FCqIUHivAvLyf2/Zngbo\nTptnonNXte4RFizckDDX280disnueEDThl/TY4C4YsPoKpsem9k3u1e/as4d\nSeDpJsrkpI+7ZDexUJIrX7X0K1q5nyZC5koll/BEPm0TlWWNBP/RYNtH+j/t\nUAyZ98+Nc7tRBuGtq6MX2Ply7GAa9xeW1YDuInof8ZaSnquyDJPgTG+4R8+a\nUcgJHRZ7ddv4hXN6V297SlwAqtRMCu+lc22T8SRndCskzf/X18sApsxSaJCE\ncixLpjT+YepYJYAvjECJSo+vaaj56e8XSeRmhMtHVW1n3pH5UqpTG3xUVARQ\nMTTG6UITLXi+GF9FdIQ2+VwUnY9ztOswY/vUDF6gVZmKXAZ1fibw4zdwdil1\nzQk87QE2xmcb96oFciNHtzCSPSibkzoA3zfvq29FtwsyCmaOune0gWAJqFeY\nMJHkAjtlKgMmHrEZGF5e6bpTksibSfuj40CE6G5i9qPsKrCW332DYn4Hklug\nGrdq4/xhHNzhaHaMJ9dW5yo8iyDCOU3yWfh4jBAm8yLpoSGbN/fKUl9OdOD8\nyjQGiQVAIKg22upgcMz5U48hBWo29exOYBUoY8RaipnIQGaZwuv4Go9QZK44\nJhDJ\r\n=HaGS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4UvybZvmvnonl+hEnPFss4+JrO2LD2u2m3/HaQ6t+YAiEA6DLb3emTQptiQ3fgCO0PBDOhD+NQ5yBffbzIq8cXkPo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.36f5da28.0_1599791658233_0.879214730669259"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.3babab12.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-ripple":"0.19.0-canary.3babab12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HnzuxUavR4+NZwnZhIls/erGW9BjlN41e4lDWWuMY4T6A7gKsIvSU3hVo7SHDLnM1gtNXSLCFLFcHL5XaPcGWw==","shasum":"16fbfa0b0beda93d3cf8a400775e52e9ffc447e2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.3babab12.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLdCRA9TVsSAnZWagAAyawQAKOp4p6cbBZE5+g0Ugz1\nBpsZUX7PcBOn6gkoU0NgqYYQ0p1bBlz0DHoAtdC6AtQbu4mvawtMeN15vEqj\nWbQ5ULHM8aPALR+bjy6K0sig1dpAVV8rg7H/S44qXblSltoT4v1CTZEZJdke\nwLu1VdoqeA2h6wdG5oKWOWoWUtrZVZ6qJvkmyf15sibOzWFadDym35BdH3E8\nkDiHHjUUSFieTEU93pNE6GKuy54JQcY9TEVo7Xe80CuS0r1v9ti0bcR68/gv\njmeck/i5mWou88djQT0DTNHU/t+uw6vVFS0l89RY3/V94evJOxNxqeizs57l\n1MQAIzSeydp9SpLs9ZIgERT4pezF1ZCxgF/oKRiMZ3XRjsMdRWLhaRoO80eY\nVyxOzuYjMbPNe4h7lyw38+ISmj8wq1mygT9/qLxPed53qVA1Ne0+hlTrLG6g\nMgl6ysK5+SonUzOckg7V2zzxgJ1kOAIXnYBlOJQsXTbRBHcllPAliPQKzvSP\nxqNO3zveMQSkoe0YL4kaRKGB4tX1njal3bb1gJK9bbY5QeXWSNNn4jmT8aEv\n0sT6usLXK1qJD+7CYJZhPOmef761NkKPqECDrAGMN5hms/DA08nqC80rMb8V\n0k3dbeOX5puW/n3hrUUp4Co2dDFXMWQC3vfgTvqe+lT4O/iL4CzwMQ2miwKX\njXxH\r\n=bQRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlnVXrc/2JmyCphgIUEv7sKJ0D2nhV2HirTfET6HtdpAiEA9BclXKZ4Bw0AhVbYuXqQ7K7gLQDm+JLkeT42jTCrzws="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.3babab12.0_1599791836886_0.11101891433384492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.a4481e6f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-ripple":"0.19.0-canary.a4481e6f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IPVda73N1upskNQ7fW2QG+OjE0/BK6GvGjgzoHuogklcFb/IqPH/dO0U+N75UDjE8m3hIYwAvPMjdakQCSCH+Q==","shasum":"cde2d5c0007d803896d13fd187c7a4fcada00ed7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.a4481e6f.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuW2CRA9TVsSAnZWagAAFXQP/R80l5gmqOJ49y7fyXuo\nhuiCoMdQUWRsh8V9FoY047Lm4SoDRJvv6sjzcS84ojJPwtanDhpyNp7DbfB7\nhLWaEUibS58kC9JKJc79tzdZiDMTWwJrPOnVLJqyZqF86Vz55b/fFNWfG2R3\naEmOYU+qYzjzKGozrECUV1B4jWU/Il6kr0g80tusOThyUBkw0FWN6NyYRkf3\nxsXgUcX7g3WerB9O+6lmcHTB0xW35DdlN9+KGOMUUgWBVlQJjanoROEAdPd5\nximRdULe08ia4l15feziomBIu+MrdlN+Yw0AkUFlqETk9DPAaGe4m64+PggQ\n/N23muZgO09IhuwFWJ37gcIHZQhrUZm84JurZkWj5TTtobGJg0e0cV/BUJFw\nn/v/TlbrJudji6AZsfJratZxSGIhLPaTRg6H7VFjr5GhUDukVBmj3X43VrB0\nT9kf9f8K6r2MAriNyA7x0FwSE79DMDLlUByE15g55T949UNR8ZMmE0+XW9W5\nontKtQQg2KEjhFvOzykxHSEDBe78UVQh5ihu05pc9QmnLtw7I3y7xWo5gZ2R\nByKTzsRYpX9oNYZ1Evhu9fZUcjBRnzIRk3/3LdEyoC2H89FO0ax++H/VXtZZ\nymWccsRic4pQ6JBhwnH0CPY4umcnkmb/7bAE45xJ8etNNmKTRFCbuJYs7qIa\ncM+s\r\n=sd36\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDChb4Yhwf7RdNTKASmTenBl/1W7RGQM/QZJPuM7JJPwAIgMA0NHyc64+XW9JK7aK9niH4Un03Tb6s6d8QUmf4OAn4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.a4481e6f.0_1599792565990_0.1041040538500293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.a9177836.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-ripple":"0.19.0-canary.a9177836.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uMQ/ZRxE9pJ92jSfb15haOTc2ZnSZLL7H2QKdVqUt11bVd50jbInYKiUIET0VF8EE4aRSz9Z6gAQPEujQJoUAw==","shasum":"1e3168d546107c8b3abc6c0d0fa9fe10928bdef9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.a9177836.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7g1CRA9TVsSAnZWagAAr4kP/0jyeVejGNrmWteeAVCt\nbZcKKT1suOCz0Z+S+QAogk/D1Q7cIxXvXv4oFZfpqCJETolmuDsU1aGM8o16\nnqFRhSP2Xl1U4GEUVI9bRHXXWxoyN+zir1WaNeKb/oSo731yvd1VwAV/0mr1\nSiMtWUGtiC/vQekLpv+uyR9UgmCniu0ZvmMlULMS5j1gJ1Y6DXL4juIYPBiK\nkrzS/tmXkQ9fsw0Bybf/7CRnLesUm/hm/H4CgSM9j5EGy3i3lOryKuSi120R\nfKnuWVK2uqRUlNpn3GVOyPAK9ipn0qXTQI9D2SfQ+X70NGEW0x0t9Ewue9tG\njx9yAlDRk7xG2NMPk/UVEUQ2G9g6zb5Rts84aH/2Ah4wxKHre9UzoPXVVwJY\nJXYA+z5u9n+kUzxftHo1RCApm5i3Hkoobz4tEazeMy4qCyedooV6Vyps4Y45\nA+7bXH6Uf1+5j6YtYaRhv1JfWV0xom8GKNKjCqZJkbeNwTodV3/kY5ZsFSAw\nHG4HtgFZBL88OA533vonudllVIlzKOzxi//QL1N/FslCZh+Fa1xFH70ztv8h\nI+G0DaqyiwUn0XNbFQuU1g8CUxfKbGT/zYGLz6vYW/cHU22rn1Ho0hVC6RyC\n7sygxNn8lcDdVZfMTGAgcOrAFg4cxs2NAvSPfGaJmiVmQQXWsuSBH4Jav2F9\nMd/Q\r\n=sMIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2tyMdS6UXxwWzOBKEEkdBMMSzEekZ7gfJN9QYpH5TIQIhAL/n5tvVI8nqxem17ZtmIDgj9CoStddaNlrblP1utiNY"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.a9177836.0_1599846453023_0.5436428081460045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.b102a3c8.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-ripple":"0.19.0-canary.b102a3c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-e8D4xjcVmMQ5VfaedR13yqsq2abveBed6ajfjonijoHRWbYBhDnJ8AOWgIekEFrK4c9ShYGnm7RGRmX1Dx+K1w==","shasum":"07c80a4c6475c4e54e56133d684b14a0380db5bd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.b102a3c8.0.tgz","fileCount":15,"unpackedSize":80762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87kCRA9TVsSAnZWagAA/TAP/iHQB69jodNGyHgTww/X\nJR2VQgjNYbu5yrTNlfM78SaR8v217jNx5rfBtbNvhY2OJLl7ayqWoNr9Yppa\na5DEFPai/I0jt9tARrh7UIyGjJIz7AInjIub7kV4t8YYPLXbVZDiec0SWxsE\nG9PaKY4LHYE5Z+0vEsMm57DOP3zSwaEAtzxSXXFWN56d1/a/WuCFPxUgDkKF\nPq7Yv0mHY2R14q0V5uWLkhb3bVJdo8UJquksyrJqjN+gPctVSvlug+wU+3FP\n9carEDh2jGTiMmLmOcIuJ2zHel6r/k2oQkWP3oJR5GiiKPv23PvDRfZMqLo6\nBFPJi9AEPtnJ2Qvir3AD/jiPg6UatZhKwl8GIgmNfhUPcjXEivctG5tmN9TY\ntQ6I6yXpIeL4A4KzQIl2CoiMbogGRDja/J3LDRg01y+43Fj12dJ02i2tc6lP\nTiHCZ1nlox3yY+jHalXvtJOP458G9sICi5yWU73/yX69HdaOHB1+f0W4+wOM\nVHlsVYZgsNyTKSewM5+ogywzG6YiRXtbvjAtCmC0HgDhygopbYc6PtOi/1wP\nuNJbPqivHwMduffe1Rlkbl2CVw4htbZpEbzqXbePBBbsslnBvVX4DfKd8DfO\n41gCAD2UR+WwX6CPghUsgst2aguVfl+p4SPS9NBrzE6a6IDGQK/YiJKf8GA7\nPUy2\r\n=ctvp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHBmCW60UxgfqAXhA13p5AokwH87Duo0pfZmoEfXxP+QIgSZqu1bQQKUJtEUgSlcjFwYw8nQ0vFNSFiIp/0KQNt9A="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.b102a3c8.0_1600114403972_0.6347373142859201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.a7fbc707.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-ripple":"0.19.0-canary.a7fbc707.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-T2rGRACirYstoeVABOnl0l3yUV6pBN+2bm6qc81y419PDO2ZL8GYfDbyxG6fUkVKXKugPJoh9y+SKo8AbEFrZQ==","shasum":"dc35cd43482a1f785b9a4043b9f07c649f2e1dd8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.a7fbc707.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZQCRA9TVsSAnZWagAAwugP/3Jf9mGaqFbgNoQ2d6h1\nBRVCoI6zvvTJEA5ZUe0iXDobqTVP0NyrW5023UPJhQM46MDDfTxTHoZwF+RB\ni2cc6WaUleq7XAe/2KFLCimc8hWjTuUNsy+W6iGlljajg83Cb8S9z1pQD9fK\npQ/cC96PGEXJ/g1atMwBzxNc6XzCl490S3B6opNkqIBZOKaWNNh+CgjmZ4HB\nYE42mOEQC2mWzCH6CBmPo1iEs0gJrsEaUEsFwHrYa1Qs0rZyEzbNbmgi27x2\naxFEw8skKvBkwQ8DnyGw+oBfiYrA79+9W8mfz6kacs+TI2P2SeR0BlIYKqC1\nAr8K58IWOpYFa3nwQliifQxrd7iwVp9DWq1PwroUlqMOLxP5s/Hx0WcS2Xwn\nVB/+ozVjq+xgQ8kasAbM43nLircvfgUZE0tOCeqbJ9/99ova7T1eS+DW+3qj\njtPD4iR7sTgifNCq+Xjqv2qR9uilQK3+QkU0yBOj3taQPix85cs0eS+duaJm\n59U2Y5c0wdUoZad9J2qGrBtOuw+BuggXtqrXdZ/oafPdjv3Bm6KFeI6BO/p3\npfcyzwVE88aswyySKC9t796n7zu1mL3RYmdfD5UIpo+emphQo+MuusgQynQk\n2E07WLVFlidDgCQKkxWg6VpNiSZ0vZwHTIQYg1LLq7ZL9/hu/ReYN3yi4PS+\nALYF\r\n=xdl9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRMuF0EW2etM+bZiBVPBG84lqfQ+mF/EMEfuoTU3IiWAiEAyssadZzXQbgxwCkqz0F5s9cuS7ekWvOUduCutdhv5BY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.a7fbc707.0_1600185936486_0.20164152295783055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.ed6b8660.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-ripple":"0.19.0-canary.ed6b8660.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dqet3tlayF5B6E/MDLD4NsJIyP1dR7KkssdSE2lAyIG4IHPpZU+5VmhSW32sO1HfKAJIra6Wk27bVuQVUlVrsA==","shasum":"31d4a9f80cf63ff4356117b86e720f76aed3cde3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.ed6b8660.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjiCRA9TVsSAnZWagAAI/sP/30jCEBB+mslWXe31TeD\ndN4L/pdFiRg7wuioaEtbMqdeoAAQXPsHYo9EqH4vudtPq7N0hiRE8qdISwZ8\nyAJD2+BsevfmIFSFJW+Add6FOaIehO2cq5lNiubz37/CkHUs1qBStSv/bFEl\n51I3KkxXu35gvxKDIEB15wBSc03+iL1ZgpS10IAeNd4/oTwqT8ZrEoYdBxmA\noOiR8vy+xTFRvaitjZaxU7BxOBntnPV2By21xnVFeiDzHZ5IIpgZcD1MiAKe\nAFGeYYKYoLPVj3ZYz4TXDchl0kYdhvNPVZZToXPCc7es9m0WtD3Rps2EJjs4\nOPGHiBs59Fybr/zHltpBJs0ycpU1Yf8yJrACo4FBr9ByPiUBcYR6Ekvv5nBg\n7MromL4/Mhp7amz2iLXmsv/JhA17TXT0eD6diftnb6tzCqeB/krmOQz3G2xK\nh28rYpuaF7b5pfYgFjKo6PxIdF72t0mh+WIa3qCc8VxiXVbtDuFp3jeCsP5o\nOFXEghWgBphTgFaB2Fh97dbJF2j9531w4ut09oEJJ59rDS0ETFin9S47zHKj\na+3VpLE50FtywuEGlh0kKE5biwVy9FnF2YdukHwKSO0uXQaDsn6sPw1cgWtm\nAIMjcRYJS4i1cC2ccnViTg9qu8EcNHt4+GtbA/4tFsmofMxBnpJLkw48w3iw\np54E\r\n=t1wc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1bNwceZJXmoEgYdkiG/lu7UeHhiIX6M+3+zlMcIxZ4AiEAsjRE707bcCDVmdSi7EDu2Xq2SwIf6CBOKhTP9cXIWr4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.ed6b8660.0_1600190690036_0.06439391596115418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9c2331f5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-ripple":"0.19.0-canary.9c2331f5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9mEPPMAp8ChYptZTXOW4rv0N3oVCarS4STS8cRzloz34C3lFj+I2dLzZXjA1A6n1DB5RxOFskApC7iD2zbvLxA==","shasum":"44b98e44adedf61f7af1a72c626c1b24fa1a0bcd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9c2331f5.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6lCRA9TVsSAnZWagAAiPcP/jAA2QOuVWMA/rw66VC3\n3yHKnC/imHcM79D5VSJtPlPfb6v+otK5tGZujVCjCH07X5tdmE0tQZA/vb/z\nMc5832hp/XLM25TQu5DIAC6+y4BcWiD4e4r0em3zyK4FwaoOK8Xze8iNce8X\nKTrXLaMlzv3A4OnpiY7J+33Acg0q2sOOKQzo0+hFdg97lPs5LvuNNdVjqgHO\nEsrZfmLW3nSeLQgijPlyBkcBPMb88O/vaEEATU0K5bitPq8mU0eCNra3xVPg\nR6CJnnMsymRaWcxxHbeDmWnBv4rqTv0CpPzY5ddgd3sPmZInwjhhRaRckWun\nW8bc0VkxgC1ZLpxAbvCjDs9X+wy+QpA/6TkakxkzkFdzVfgeara5CkiP7M++\nk7kkKOlfJlEt11sqiC2/W39FLNUiSqXStXAH7a01k6YfhlVaRKVwRPuAtI5X\n6tRhdhjD8tX08u4+WJYm0LRlcgadz257i+FoXuxVwBcr4DcDtGbZTSUdE8wG\nAJrXLUb80iKLNAhi9XtJhNZK75/WnZlQxTP9YAu7V8YwiSjGxLl3xtIBXNNY\nlVXHd6L1c4A4TmgrZk2mna/bzZW5TlQNDPhI+zKrZ9fg3bIQuQiBgNBDIA1v\ngp2HS78O3TqIfS0gs5lfNds1nG5joVaLgjr9IKjYr0WD7e/zgMThqEheyxPN\nmZEC\r\n=7bUo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIj0+8iLGv6G5Vf9iTKuiyFoxNaTUuH4HWwFcNvUTKVAiBUlNaUoeQ3OvUSODURWHQc5qBjrc/Vgb5PrK5OrL3cPg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9c2331f5.0_1600192165428_0.9412515910610386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.63a5f088.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-ripple":"0.19.0-canary.63a5f088.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-++8EuEkyCtnE/yq4y+Lpv1kxUGxl4ePMtSB6+4m/KjkaSzXHSNRM0kNkrYpr3sWDAc4fjrYw6khAq9roOyMczA==","shasum":"f4ded66b7785cb222fffa2858f69d463922e7931","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.63a5f088.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoW6CRA9TVsSAnZWagAAjq0QAKUr2YNMzmeZeOZRa8Mt\n7fwffb/azNgtavX6SYxRhtRQnzt3wGbNc5jjFJNvHZ9SBdSEqk4whlU4LHZM\nOQRqLacsHgyCLTrt72+6kQoYzxkk8teyOriVp218Z9UD+tlTYYWRpdMDgAha\nCmJvcJwyOFz/sk7PyDngjHWNGefiNlCGVmkjVzkANJDTOFNcNjsgudBUrjbc\n7PvDg3kKbAxzrVNE3QMQ646pZicOPHgu61z3TBr5NBye2/jmqk/VmXAGxOec\nCZidUNPZco+IApIod9SGgvXRPcs04i9qtT2S+xunAfqTvC0ZiYOVQu/Cl5b1\nX+HkhI0e2YzX8q5Zz6co9Rnk9z/5HGnGcDd2LJXuLt55WtD0lNp6GG/wpdEf\nFgBiZWPjWNN5nz+JhZCeoa3I6Zc+RPCq8nNtKbLzXg0YLg1WkYfGo67qC0Ft\niP8vSnCoN9YdLfkeBhb+IyBA93Kz4unkgC463VO/0bC/NG0dY1LaxFdrQa2D\ncBSw3aAkqRgt9D9LOkFU7lBM9W4diZXy93XR8cTFMKV/Q6nqGT39MrtQ8otF\nYh8j2hOLBI4mmgifedKHik23MAoWuNalAO1mP5clOQisoLq7o5CcSAPZyhNz\ng4WQuAOPcj1qE0aFFZEX/MoHJId3zAM/KAsVdgbvhhaxHyFcNwBwjPyWL1je\niz/2\r\n=JG5J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6mrYWxBZOyZ0uBoOxSXfxuFUoku9IE8sX+3taUUYhRwIhAPZiNZygr218lZW9aAVr4jooOkejbYQ0K4T9G44w5HUe"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.63a5f088.0_1600292281645_0.8204024727315833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.b7995e49.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-ripple":"0.19.0-canary.b7995e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HRMVlI0morOTHOJhTQWsjeYemtTdBukt3qiu5MAizWgNiNxK0Pzrw8lUMpMSj/1f9Rpc5fjZ0HvoS3f6y0B6tQ==","shasum":"830a5293d78ae0e7f60e403d26c2372f4ae19322","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.b7995e49.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8vCRA9TVsSAnZWagAAMpcP/3DOw4FCAamWsMJv/Evj\nLGv0jnco13nTeDmJPfQZ7i3ObKcBYgrSc0WnNdVG7phLjCIcfLiUzt1NEkXl\nSuTXyfwIHHlkd727M6Du2NYaQ6DCj46RE1DjElfgHtV14rJNRw3uhvJigVHC\nK/n8cyQLaojtq+Xvc13qYS7WwmUodwoJ5CS5n1URcn6VghzYYK5voEzZib89\nrzqWKVxaSCekrKJtqyVI24J4ZJkIWklIT0MlKXRbv6NU87wDepKP/OmLVcwF\nLyQMmYNpmLATVmCoMyhrX6LDVL4uAGrNP164JXG9md44fAcmvbuZDeBnvSYL\nbQteY5VWskWRurkAB52UIJyWIqHzo3Dv+oMV7I8J+TB7wH8JOSxOAknpO+fX\nQkASqOTl1u7MZpZYUmQ/GQ/2OQXbZlpmh1+vEEu0WA2iS5PyP0HZOQ49cqbz\nyFPhU/hDtU36UZsD+pxaXVOPwM2fVoXHQuwyGR8lDAQwa5VVf48Aw4F6wUAq\nrdw4ZJzUDxU9nv4E0KkPl0vBm7TJUURMQY0PjNEnLJ5eYTNo64DxKBUfKzGb\nDjMNuVE3QPNoqlb2UYXsNK53FEImTyjWC6gmTNpAdz6PKPGRU6d86hZc5K4C\n7dZa/SMaqWr8QiEnUx9U4PDGgapWmzfWO5XFaxIr1gjtJfkF5P4jetKBqbCg\n5nNU\r\n=JM14\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCodFTfFko7v8mKLe0RVbTJIXiRxhF4V+Gnx7gaGZPZEQIhAMMgv1wzR5U5FlBq5+rpR6tEOn/B1c64avhZ9i7frCjZ"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.b7995e49.0_1600298799049_0.4722070920353487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.0da3ec97.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-ripple":"0.19.0-canary.0da3ec97.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-H0M/eEveD6h1NBx46rmVW9rgglvhs+ettSJWfo9Bklja12z75/cMIKj3vhuuphxIIARJ2aftEqO9LWhITqYKCA==","shasum":"c41421840e7f2054ddfdba74a849cfb0ad20a928","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.0da3ec97.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRmCRA9TVsSAnZWagAA3MsQAJDwj0cl86QslxglM7V5\nOD68JUvhw2BadF9Vf0Cnx0BY8yZe5O4/xH7Diszyj+Qd+CrS2hROb+M54OQk\nHYSUSZQCjtC7o/hkChhxHHbFlaL8rxohBbyCCB7rNcrIcKBJsBy3cDD62TPd\nd7NS7yorfavR8I4108YQDip8A+lCQRJXkS+NWKmCqLTVt/vf7wB3gHCv1gq9\nR1isWbgyqUVt8Fs/SqNNozxZnNm5O8mBF3xrHdfwvJheeWRK9gc6HqA0VvMF\n8/KDdV9bRQ9vNr6xqXqO4rc7lsGglWtIEfrffDNBLv1meZUiTr9+W7Z8kB5C\nDnTVh694hULqauxeItboCq7tPUYe9ACcFrBo0OcO7XlthejKr8+NFiVjwwpA\nPE66meqjSRHBF44e0+CoW4HJR1edGKGB3XI1JvaaDZ4sWyrdqxuuJBVJpOTF\nP0qAhOE7nQxO/IKW+Xz+yh77mrJtW/FgUWqME70syjmr6R/N9lipWwCLuqa2\n45kGJishSje/H/blBupzRcQT6Kq0hp92KXstxE7UE3GHb01vPDn4VIZMOFQS\n9OFX48q6L5IXOKA0CEd3gIKyzZhV0YYyCFy75PDsTZSMD1Lvw7jh8MEveb6H\nIjtpg5ufH7RM8vHC994HSWn4rS8R01+4Xas+3XVf5f9Sp4v2BaBgKAN+M2t3\n3uo6\r\n=uzu6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCotq5CP7Zxu+8qrQFj82wLGeJuA5aOT5SxS7/q6mkqyAIhAJ4PBxUEDMLQ2GL7uhPF+8YUznZ86FPnGSw+uSiAopjq"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.0da3ec97.0_1600726117649_0.9735539447705328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.a0793c96.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-ripple":"0.19.0-canary.a0793c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ts2V0WNJzdNuPAn2lDWBJ6Skwoa5knbE7O7GK3ooTBzudA3Mc+s21amvurOjxYW3vn7eaUewDSPw4gfr+Nz/rQ==","shasum":"6011b6172ba2c9cd3eb646bccc159438e8421e9f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.a0793c96.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6lCRA9TVsSAnZWagAAFlEP/jIyoNj0FSMDcH0YW4Vr\nCwkmCfvVVR9/urgRYSCtJJYEEq76E2bGvzsNtEbhh25iO8GoDpJM2oVO9g71\nxwQhJ3STEn4Hc7mSQ7u8kVoa9ex9SkciNHzjVb7PO+vfGIp2cUsuN2KcUjvE\nOmyLR2w+cdrTRUiqPiaNJRLnSx6HZJlwk03QnffZTuejbJiVNm+o+rYBiYgE\nhpoFmVheYfyVcps6E6JngXLjhgwk02ls9FTk4KqcU8j08pFTIW5HvNdhwaT9\nCiG54XEUWLjkQl+DlIGHDovP1ab+4F0RW3wRyT9yIwGkhgULqXVd459ACq18\n4bElTCQG5kC1jahsbuc6ZiL59ZWcStxoAyFD6/NigTrZtPVkeqQlqJ1h7yOj\nlHyIrWNZj0oJ8R8oOI72elmqs/st+QO7/8fxLPmnm4HxiOvObxAu3MK73msI\nKC3p/XF5O4/Fcyyvidl6q4TyyfEu3/KruZ3sqjyWn8BDW2CB4c4EnyGEbvSF\n/U6/ZhCiSXiIEeqkeT8bB7pFc/LNOJ7u7WECumgP3+AU1dpATQuaGZ6e4zG/\nMuj4vSFmTqQb7N6AnjLWzz5lCK8vpR3/FEEe4JxtItvkvNyfS08TR/HsHLwW\npVONFQ/qO3/PyyueTRgHSkI7SW9zasWC9Me0bBxpY+H0yqkIcbm6vosigp6G\nDCFn\r\n=8u/M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBvVWtfCHtyKMQ/cobbmWksX6cORkMS9a2zD7qN/+muwIgcEwGA9OP1Uu/eeYbUrbI0hCEdR3/C+A0C3FDxaBBwF4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.a0793c96.0_1600794277516_0.03490517674702498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.06998a3e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-ripple":"0.19.0-canary.06998a3e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ld10j61QhIbldnERFRV0gsU7tP2Atc4AFDPvtGv/Nc5Q0BCi9x2eQQghsH3LqVeLpyRWeDj9yhooBC8NnbVNfA==","shasum":"29a26e999cff5d0afa91f42b17442e8353ccc36c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.06998a3e.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGtCRA9TVsSAnZWagAAl7QP/i0xTvRugAV03JvqvtqV\n2Q88dNOc8lH27+lqP5vtQuklZ4Y2HZqXIRasICgRLhEXTpmXMXL66SyXXPU3\nxZ8BWwX24QAg83gLHicOUNKmoEl+/XjAN9+DO8GkTYrm23Lxpgzjw2hHAgVI\nJPhWyqXncDOyncKsL4XuJNa+PhkvMG0xtmiVtTBMCGo8OANvy6bjhoow/vpe\ncivELyIN5k3N1RFcQuVGxXEfyusLLFRGAZjAwjPvYtvX4CkcY71WqVEDpYgV\n5w/zs2//UkiXOfrPTRkCxwX+C2cMBbgv1WCUQpDAVs8i3k5SdakdWhvtw0to\nWrUXMX7BMO2MqgclqauSoOXhCGtfeMsHZz6q4Z1/L2snTFEtIzGMlwU/LKW1\ntQykmLG511+kVsYUQU41QkpGeAQgZQO32fr2RIejb+z9J21CGqVt8jg4yNuV\ny/moAnblfb7mm8L//BfyHmnYRZOiCAi/Op1Ok795aIQycLQht1x1mJxdpiii\n8C6lPs6HogNf/rSRqSE61SYH2Sefmu3Zp7Uyv0lLkES2xW6iC7Zsemje+aiv\nVuTrbj17jJT/CQVu1F4G9j/6H7ox072Tde9mwT6ZL1SwNYq1NFFZAJbns4Bv\n8FbUTV7IFLI1TZqipSm0LENYFeQAz7dw7wUGkz7US6TIiCs6kQTMQCmsThr4\n2O4l\r\n=nHbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfmU8sOdkl8Sa3ZUxBL/PF+LnF5sdj1RG0Sb2sWikbGAIgMGQmh8uLQ1nTQpUC6ceT0e/x3Pnd5c8QI10IqZigVs8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.06998a3e.0_1600799149245_0.3421185675175695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.3484a90d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-ripple":"0.19.0-canary.3484a90d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hMjxj7SHjWiniQoXNScF8Tgr+sx6xoP4/zf/KixsXf8fPsEizBy3yg4Fc1Jg+inScgPvaQbrfYca/iNvxZXhSA==","shasum":"7465488bcf483b1d6f91abbcfe891f2b39a866d5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.3484a90d.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTdCRA9TVsSAnZWagAAJ5EQAJhsG3Z0bc7Plk0J0R1Y\nxojOu1Ua+ltn4iXBdjRkx8fs2IXYO61ForQo3khHsbKisc7S0CzpsuGaTpbt\nomPyWZFF2vdRMXz2NjDz8TVpb2cuyz0ocf+ItJKRJ72BZH3CE1PsI+bjtC/N\nV/CCMJudIk8Q7JTln+aInScSobheVqUI+CJFzYFyKLdvFLU07RUKIgVD9gK7\nR/6fzdYJm1WgYLLYUiCVi0mLjM5fg4r6QEzPE68UCwtw7acfKcT4DhwIs6d8\nmo0GOOi/ccyYobSfo1/MGGHI6UQiyaRhhV7vClnzffl/XN4ntl07l1t6Oj2a\nFZBtiqeM22x3VY5Uc1wUJ0DYqm0tx4MHPJ0BqMCzd9tnPjsigihLwan7FGF3\ndXCz2nq59xYnzyBdxPxRx+GP5qbpRxQMXgetkMGx4aXX3MZ8X68LmZtEuZZm\nh+aZMIFMxCdIrR5vbScys32mccDz2yBb86cTm9pm94uuLRtuaI6NIOd4nWVf\nV+Gg2vJmA15pmCdzv9RJp8waIHv9T0ZMewqrj75fj3QcE1D4I72+f3Tyk688\nSDV04vPSgjVXILLxTx/cl+7YSegK6XR0uIOAob/HwryzR36IaJUPw5zYqJGp\n6NmjNeHT8/10mT/nOw0gmCUvlO0KLmfw6BCLdA1aSqNWQ3huPR/yWtASIcaI\n/Jqa\r\n=CXDz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6kQkdJVgHrTiV6Vc5/suO1GyZTzoaQpl6wnoVmFq2tgIgHHCBhrN1CCnRDFOnGLL7Uod1sMfx2uRjx8C5nqlM5CA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.3484a90d.0_1600812252614_0.6228867113409864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.3f99af40.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-ripple":"0.19.0-canary.3f99af40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-EAGCcz8Yxf4UZF+OCBzxX/Qhf8+AR5Zb1pNSJVcvz7BjDUYtcRnN50t/YMMjm7I7Iq/Q8e3UYAmmdx0ISA+eOA==","shasum":"0d1b4a176e71d9d1cfcd450d0facdc01f5c6f76e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.3f99af40.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSn6CRA9TVsSAnZWagAAes0QAJmmZ22X+HzzVKUgZh6S\n3BrIMBMjeA7XWaFGt1i5dt6xpSHs8bAmbKeYXp7aoP842yxqR1W5TohQkEEn\nv3cTgws3X6RqM36j719YdQz89jbyoMYTe8qD6Kc38RlGKYdPMK4t35OBQk//\nFowviLsRbu8iaebsB/vtuFrJ0UE8IxjaPkUpPinQZz2PaC6mfI23MAOXZtEH\nEX8Irmi7Pvzwc+XcjYhcKgNLM0wB2x/C4VzZPXYDH2ljbion8LI12+bs+CxQ\njyJQx2krz2fOnyrlbVUPXAdSixL0oxvzaRPbOEhaynvX3I/AoKDUR47ePv5r\n0rGf+e/fGuUm/X2wohLXKowie71XxTIbftnxgXD34MQ67s8xLxVTVGbDCnsw\nQCms17h3IISau4wBbG2uffFB7XLEMaVCUp9gMUJy8IA6Ba7lbMQPxyWQKl0t\n+6MCRghc1as2zbvxtGTLdOjqhS033+sEXb9GyuONe1urAlwV1K3FaueUeKs2\nQbfaUsrVJdR4r015UKQ/PSDzws6txJ4SED6Xhi0xAgvT41WbuaFg1HUVg7vj\nLf1JM2NU3yKdfhhGCtM1CqBdSWs8vxBuCFJ5yEUp0OEJiBmw1lJuh+QVZsH7\nQVJGqzCTNBFy7ibJU8DR1sLTKsVFMrpmGc2WdKSPQRQegpX3oMbxfFv85k9k\nWwiz\r\n=KLK0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID61xVslNXJw6/mCOnAbYck1eDF1T/6lWlM6j4w9lOTPAiAQHRM6ZI3ocaQ5RalJ0YnAVGpc+UnZIPSsvB6Tew9JWA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.3f99af40.0_1600989690426_0.4498554848535057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.72aa1129.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-ripple":"0.19.0-canary.72aa1129.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7Xuia8hB6JvaeedKvMwrWH5ecihpYZwWjBWyaKyvRsNa55NpMUOnHkou/cSh2JG/N7M1pgUSehkgXXmAYmpUtw==","shasum":"f692880ff67b5c1b56e1aa5444596700ba8e1e25","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.72aa1129.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwKCRA9TVsSAnZWagAAcxYP/irpUsILlC0li2N35cBk\naF5gpqOBg8ZHi0p8wl2qF2dDEWFNF/QUEuM7fnCGqQfLT4Kzx7mzzOgCbrdw\nAM+c8NxObYOmo/kbC/fjO6FJrp/4NqRkkUzhVWTtYXmajsJOvXyYNQSqzxXS\ncBaTHhEOSgVlxIeKWApsWQ1e0lxbiDWaDyAAvCgE16oo9bVg3utDP5YGw7QS\n5Ll1VBHr4OGwGIAVGxemM8dsN+WVNGZCRAWFObDKv9bg1XY4Hz5mawggf4Kg\nsjfLJnzEGS2GSDV5SkYsVjkJ5APqcdwan2K/TG7n4yidAxT0bR6HlXzWyXIV\nKufeGRtjTCV2t0dl3eqPwpjQlMQGcks58KVBQm+ZKvH+oGKAW3PcyFyGtW6s\n0gbz6IWijcQi7E+Scr+q5dHirRZ6NeyRKPjPvMH0yfo4qRDm7/1bJvDWLo5A\n3uUpH+c7sofsVYCakt9no/btBze0fRXlanEQbvtLLc37qMq/ZQfrvgJwlpXm\nfwFevP3ECSNqnE7CLPNuvbEvXO3kV38jIgfa2S0LQNYlFgCKLNrGU/BvIVLX\nZM8gFGkksOC99/ybRHKRrGKI8yxHdx1emGA/Cq+8Mz7dtN1vnZp0VlE+Fbno\nTriBY2YIV9SRl8S/KPFrkc5kxRvbYeJ1Ji6oTCkyGWR9mbt4nx0xEdjQ8Cjv\nbdzD\r\n=cj6n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkatvImyFJqK99OAU1KrgYRWf5XyxkBqeglXs+r2Pu1AiAexVrXqgnu84Q1io8mUtgLQNagSFp8/ps5quLbKMRSLw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.72aa1129.0_1601068041880_0.17095649216627384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.394fd3f6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-ripple":"0.19.0-canary.394fd3f6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-V4Q55AdsmxANCQqp4PcnkvfvNikWzr54sJ10pW5V16AP7MtWFcTVlEWy/oZRlXuagIEIQnuH1kFnxCzceFUuwQ==","shasum":"7eaa450a7f69ee9765b72dfd9c837e8416b6b491","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.394fd3f6.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9TCRA9TVsSAnZWagAAYY8P/jc/i3Qk7mTUWnhW716u\n84iczT9mzI1q9OmEYR2eIniaHJa9Ow+nqefuDPTEq4tmaJvBZoDf+SIX22/I\nvVfTkKe0XXGZQKNJ+s+21HieqCM55XJmtawNH7pHJ64pXcFDz/qIyRT5+X90\nSJB2WvbX1jV8TFGW3L8GJIzJGEW/9JYiPOpflpO911cz7cifjdSYaxLsZXuq\ntQjOVVBJvLJS0DS68atQ9qKnDqFZw8T8LVqVZdDlo/EH4hGT3orkXiNKjFaJ\nBqOwLJDIDoP2qGlc40VFGwnstO7CVcWrCXXLQAzHioG1WzhDBJLZjXwypbXX\nOW7dKd/SheQMP1liKpUOZOvQmECT7z65KywNLyBhEMyyzTsjv5QO6Dtdn0qh\nMggJDhnNYWLSuN6V0T5e9fbWihHfDyaZyHatL72fkNfLm4MaFrIffpiJzTsP\nK0YwKfzgi+C90wyaGkCbGi7ce2Y5BRPGz6ym6JToEwbpzWkQgvY+dYHClCzl\nHaeIR5tTR82cqZWDegttr+ysedbB781QvrJxmv7N+CWfkRe7fcFqnBkthr93\neXMTGafzwoc+VXJXeNK7OKlso+qne946csQI3ueOfSofyHbS0mKEHpxSsISF\n3pNyFNDJ84R6QSivfTf9Xbizs9iq1TBHUXiUscYfGw8FHOjBfXE2xra7y1bZ\nKAMr\r\n=AvKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGkGHfXlbbq83pgHHwBoJMoAaSkqoB+nPGjoKdN6hp3QIgKDraJmO9XgS4Xr/XWgrIaTCEDhPwZ5vVZEWRawL+S1w="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.394fd3f6.0_1601302355357_0.4254331171445198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.347110f1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-ripple":"0.19.0-canary.347110f1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QUjNGAvBt9JzlZ5cOjvsTgEMZUNF/fwJ9AiBbMPA0U/NoduBMOzwM0oPBBcxQ4WE9EJp0n+avltMCXMllk3VhQ==","shasum":"a0e6c6248f0f563f1f9171f512f30b4cee42ee66","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.347110f1.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRUCRA9TVsSAnZWagAAO9MP/3tOYY+dXRl59iT3ajAt\nOq1w31xV8UXF8urim+0p8YuuqgbS1HpA/8kAbaUh2UuJ0Pa7Krn2j6jm09Kd\nPCgWN272DY5P8BRdvAW9ndRc2TALrGzqTKQcfrfbOSaNvfAYNUjlDimL1w5/\nqZpjDltoMOHJDKi6sF7JUpynshNSy1ytuSoEeiBpE+eEmaDq/8NfA9G5C6b1\nSy712PWeyQ35nQUphYSWRL+BYf7q+5pgOcm+xZI8q3wJkz7SYXphJBBi72En\nPb9F2Icz/sz3A/UHiV+dcxYBvjdVfOM3EVtegwhCVd3tTtcr9Jz9UXXvAQGo\nFhzs50JAinW9G4q7nUHRCNPRU5kol7knAljOUyvygw2zf6RbN/Akp0fc3bD4\nw4brjRO2TD6eqoWkJZXpPp92K9PmmB7jw4c90PB+MjWCjxLRcMZ6VbjWuscr\nDQ0fIuCun92Y5PdoTNSxP+5us8d4ZpLj4x0KzAcsA2RB12IUjodEDTOFDSQH\nRaP3YmEbHCqeu18Gjjxvt7ikZOetO33DNQLDffQBdWH+X11euey/kX4V9ITA\noMtJ5Fbuv2zeqPDO8nw+RFMPQT2kn3hjmVCkDwB7n3xe56WcudHcwLYvN5WZ\n0jx3nwW0b6EW1FjIiccC+WzIaHsgq+HConBYVRmYSwTJv4Sot7cLZ9gfHn/Z\nfX48\r\n=J2yE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAImTLpS2uPYyx1cm+lW2xGxtMkeUQ4+aUveJhvoWYiiAiEA2HcGWPBX4LFHKj94pK9QDqNZkE175dg/pRL3sYQBVbw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.347110f1.0_1601311828188_0.8835267052687203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.5e330bb9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-ripple":"0.19.0-canary.5e330bb9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GJs1z3U5xIFUxtShdBdWy49yGsukFrBBlUJSnXHhqaFPsdIMf7X4uaB7bW1qMYl/fyC5gyOXLOWIFBBMIQHHvQ==","shasum":"e97f69585b538e49218f0e29689030883cf3e665","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.5e330bb9.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAtCRA9TVsSAnZWagAAAv0QAKI0kgARSRlh0wbp50Z5\nmB3zTE4sK4ZEmOytAT3Al4CGNTtV9rlu4hFi793DAqFOaCIyGZh4fS1XjgpI\ns9yQi9Y6nezmlNvslP7nopbUTLmaiOa6cjkBCIoDBv64HFj2mleEgEVakzrA\nR1yj7dYt8PlDiZMt9AG+mHfP0H80wX5etFH6gu31B7M4SsrHwaitr+1EH9St\ntRqt+rYeqp/2W3GM52mq1A8WyICK23pgN4Oz0KAaJWpHiNdyA01eM5EoCyD1\nOfDUdb1dOa6sfNXN9kPW0dmKLSDrBhfyY9aYPe0SfSYSyO9ee9KG7/buFSV9\nzSwPe4zI1rj7UtxY0byMgbEFmVKFv2lDzZqmtLYUeE/APdmXhJCL5LCvyyDb\nRpi3HoPofgRwT/+inb8gvXa0ZCXtJcV7FdfJeFS2vKCmuYm1WfJeYn+G9Fe6\n4K/Csf0Uh4/OTt1HOp043/7u2GE7OgzFRReo/dGV6dyKEiu9dKklo+2Jpc+M\n+eWAbBYBDi/ftT0PlgscKdKz4e6TfGrkNnJDWcmXpusRUs9blgOJvtplfSgN\nRc7HsQEGoc6fHnCX1yYSLO9p3y4Ne8r1ZVSWuflGuxHdj25tQngN9v7+C+Bb\n4GLoIBdwLWh0Zc4R/0b/hg8gNgDQwOGDO0QNvLrFYKYkVPKnoK/6PM5K40ng\nILoU\r\n=FDfP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhhJHHqS5YkvGm4gHZRkkiZsv2UCD6/0NH9Jdgeq3gkAiB1eJ0kKxOTtvTNQFbFr4E0ghUZMinzuRtgq/4YUK5gDg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.5e330bb9.0_1601503276602_0.852902444155661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-ripple":"0.19.0-canary.30b9e3a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vDPOs1lnNj1x9HFoLHyX9LGFP5jXQwJksO99bnPkcbPqAPRY/oFG3C6o+//3lNy1C/8AoFnGZ5o96sM7r0sBoQ==","shasum":"a5cdadc649fd2d00b6884aeab9275a3392de649c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.30b9e3a9.0.tgz","fileCount":15,"unpackedSize":81482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjXCRA9TVsSAnZWagAA8rcP/2J7Pume3yf5xm3BWOli\nxxuSpgCfmec+O6NfNQUmaLVh0QiuMYhCdORzIXetMb7db07NXoNOcd4m8FSC\nFVQh5nMOEMxwxwd2/defD77FKDWqbQ9HEIPuXoX3MU5FVrUzYTXdRRqut4wG\nmd2AOGBP5ba+Fe7AmOydGkgpK5uIgE4jUY5zpwEXy61E2YqOn4jZNq/a7sP3\nEGH0qKG9I+E/3pD+Z7jV1rOfGUffIhJH6XKZ0bi8mf4ZDndzr90mAycRE2Wh\n58r/7QcreRnJVJLTv7Nw1ri8snXSAhzJTARWCRdrd5JyLF+JGHpdj6uXsg6x\nqz7gzgXDP0sqGLZFvC0NueK/cBgm+ZL23WWkxPA8ixWa7/l9J5f682ycRhTj\nsi8kzf/VDA01/uxdqS0IEcc1HAJDOyjI2uPsLN3+AKbL4Isz9LFjYfHI+0hG\n9Wo9Y1AtFMK52WvCUI8aGf4b+B6UttLfXwUXtV1ZUVxCIRG0wkvGTaP22yZh\nNpVLVynWnbHCPR4KiGBwJysPLZ8p9k1AeUt1Fk/k13JHHRTVRdRHAA4QbS7/\nnjimcuLrVtarh8ESMhYyGVLrTWSUTuxlNcbrnTr6E1Q0Dd9PLcEIlvu/X2fo\nVb44457gVILPy+RKn2O1ZgbQxZE7MF3ceDEz0/1IxcmfQwRpK16p6qOtGWX8\no0w+\r\n=G1E4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6pyf8A/vcS1uzV8gbGYvesgE3G3eeGc4QbQaZX9P1lAiBvqZrfyxC7hd8P7LyG/4dA7UUzoGDPrfenHoOSdibKQw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.30b9e3a9.0_1601505495408_0.5846278223770163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-ripple":"0.19.0-canary.7bb04b9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-K0oUISnan4/y5ZHJzvKeFEm2oW9niYTCU6bTPD8apnL/cMSN1GKNnirmh8JmMvZN8RJT29eHKrM25Nt3R7chmA==","shasum":"a5d87943467a816404ac171f6265a2e0654fc0b9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.7bb04b9a.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTSCRA9TVsSAnZWagAAXrEQAIFZofcT+1SjdjADiBLH\nQp0F3Qr3gj1ml55eHz/C45zQ6BA1bAbglvUcAMWDaQYZhurHaW7L5ylco5bS\nfXF/oCsoehX7Nsta1RwALTzBh6P9SEyn6x0j2pV4/SIIY5n3FU1H0xMUnLn0\nfuRyc4C27c0JJ7FYmSUxEZ2viPGAiApPLBQqK9lNf2ISBiE/bzxeHaagOjIN\ndyoPva8Qen5inx5kuLlMITSgHuVnGB/YpF7NKTahGEx2wIAWIjwJwPT19eou\nBYbsOi9iUV8dJdqvwKF9d0ZtKXdplRVJju4jpa9XZhznMqQfTr0ouypeY2mC\nW7RwUyQsWxtOj5fN/wx9olJobt7VeXbh8T5xp7Zbzu/5saxEj7Y6ueTPipmY\nM0vAYDavc/w9SSY3j0O7J4nKYAFS60jykIOD69+ABYQ6W/SaNzoof/WFztxD\nKb8dig07+1hA3rhUv0OMpqIdR42PbOcCcf8KDC1F6Cn5qKvX85C3N9tgM2GZ\nDdxbekI3vNV7UHHAbU2/QvTOHJ3Ff1o8u1MAE3NPpAEk+GfNV+ZwHCximxpm\nEKmjkj4q7GkFhSungrezNgysiGirxJ6ap6YwZyHTGZvQnRcJSaB1wdWoGv5U\ntgPSgqUY27OKxK0N29FL3PL4B331BBY9DWKrHw68T9wwRcIZhgQTawKyVvP6\n+i6e\r\n=Pamv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFrzyQ2GHDSVqiyLeOemT5UC1E8zakTV92ft8qEgvlkAiAZvn5Agw4q59nhZ1a5LUG7+1wQoZA+r3xpTvwmE3Iuqw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.7bb04b9a.0_1601594577693_0.2235868016117759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.615d861d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-ripple":"0.19.0-canary.615d861d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7b5QPE/ff7PWijP8b3j1KwnK5zOW7jRYMzDRyV1f+4Fhv628h+QmYLcocCizaRic9byNak+CozbbJfjOo12qfg==","shasum":"512e85e7465fcc8f4740064c4c1b7995c34ad6a9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.615d861d.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNpCRA9TVsSAnZWagAA28wP/ifu+c0vNmBMNGvdWLeE\n5V+3xqB6X/H3L7ZH0T/zSG5Cy5pc+wzzCxGGP0lcoHgQUgCHMpCuyuyaIWqx\nJioEQWaZUsP6/2dYrZdu52lRb+HOa1xRMTGd9smGcjdzzdf3khrpYOseHSYi\nRb0zcoWQg0GW9Zu9xdVjs0d3IDFK+n83qG9LUP1j+wdlfTN3Hrmni5lWZFzR\nn4h2+SKjP+fuTqXVZdJJLOtUVwYki6J/oUyx8O/CWa0xw0q2NCRCERsf5rFT\n2wpyb8q6nsV2jea6Ui/pxnT5ohRyBQQkhbRwrsBoynuriSzkwLLTGJRWDfXs\n2YkaJFY6Zlv46WYs1jPbZ0h9TYzw9f1eatQajYVGQD+w4f8kwBHkXAHch/rC\n7RhlWHB0A8oL1LB1cJ7vnU2HR1HBsw4sceYdiEsA8ODOrgU8GlxYrGPA53G2\njxb11BQq5vdZqC1QpG3FazpAfUcuCo+9z7usyxjA38MMiedV6Y+7MbhZOVYV\nOHw0OKZ7PzAgJ+W+njXAlQGzXzj3d38caOKlWk3UZcHCmS1t+fTgJF9i6Gr+\n4Bk+AaGjRspikF6K0NsUGkJVYce4/VAWlcgIBbWLRBZkAAJfaT6H2AJDzoFR\nq+yUiF/OOHu9I6aVu/XewvkQXnDtkKyw0CiLmEbBW91DSceuxlWi3RdPZrmc\nirZo\r\n=eXJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeswRS70CKky/1bJ3pDdpSwmQcDurLZkAR6X9ija09gQIhANLXMnaZL5nrSrW1sE7xYhqU+nEEbckn5Wb0ZsB8ZGvQ"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.615d861d.0_1601602409032_0.846428001367064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.af110e86.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-ripple":"0.19.0-canary.af110e86.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-54WNfUznM4Ds9jzhTQ4ZtsD2G5fPlLiBfNBBV2K3Q1lYnp88xravyshXr0kRAbGnNHf65CuqG6fuwkTWhxp4rQ==","shasum":"f8845f8986b0e983e4b53a39d7bb6db56d023b83","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.af110e86.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yoCRA9TVsSAnZWagAAgHQP/jBu4+jVaW6l/vNQ6kRR\nqD0lMWLuzwFRM5WUH9N5e+XA4KNNkEFkQR4Y1HlKNx/URfvWQpa0fv5pp9BL\neaG7zo5UuOrkpSu48i4MqqCR04n9Djhftk9rlQ337mdCCW2AS156xUlBnPnp\n96o0h4GsIoAr7nhgLw7L59lTCaKPhjpvMeVn4XgY2SBecNvJKMLyhIqWMlGd\nZzhi1ezgW2JYbIv7v+eKv/Xs4J4WjCB2kNiMyTBHVKhWd/7GPHHsG5ZgykMB\njC8K47eXP2rf/k/gv76Z9BVjNmVQBwNHbwsuFRt6VWMGW8dlCC+ElhobHh+M\n05Y96jbhV8mJo9SICNlDbTzqjxpm7z4wMpemw/pMDH82zKqXjZHkafBOPtIK\n4ereQR30uPegmkpqKlwwQJ+s5Zw97SpAfem3iCDhCPFCufAfNBl1InauBjUt\n5ruDcaEpN+uXsu64BQMXWJBRXmDmE4WTftEaN4VEfN8CdghSPqI9eN+cnN9M\nC2kQHjWs5BL2oOm4G8Wmg7Uq4zdbLwf5xqYgdXBl9Wct05RK2gYAK/p6hbpu\n2ypoqmDm1QT6UxTUIb35Zcu1BDQ5oulfnLVmdrkyCzuYz9iP84uDx68OgLhq\nqXKzdp8ROktr9fVVUNskWdZyolZCUM5Oo/pa1KQ7rEP3QO/92/f4bZcsKr+7\nXo7f\r\n=Dcuu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9xJ1kA1kQFclzb7NmszwpeRGXHilFtrs6gfOzZXUotgIgV4r850z5g01ml4Od/tx9fS3J3hhE4AKd574/ardHfq0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.af110e86.0_1601682600404_0.42685352434886137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.89d27ca5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-ripple":"0.19.0-canary.89d27ca5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ba4RoBnc0la4o/avebCcQAhB92ttg5oCzFhVENwKzueJVX4VCJDgcnP7SFXOJw0vDKpH6TuqChOO6hmwPIbuYA==","shasum":"27886908e75d1593605693587f3f341e04def4b4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.89d27ca5.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fuCRA9TVsSAnZWagAA/BIQAJvP1JyC1aajudTfKJCe\n6Dudk+n9gAEMxCWte9GFG+0Qq9b4qOlgcn5MvHavxUS8+LgW3xu7IqxLQGmj\nfzMh8mqurYiQyY1t8GYGRIDLWYsU7GJDYROjn/SlIEZSyk6AeK+UsGIh6tsM\n2QWWDTdkUt6Kk3uShvgMk7IK0k2NRZDr42NhuAR3ky2ut/bGRM/1UxSmcV+D\nMiZZkipW7GjwuxjmikGKii3oSQaD4maGsplp8qHWB/FxNcwob7q16jq8VvB2\ny94bMUHeuHupC+wlpxEAyTu4wMqZdHmPAAMLpEQflANM+aRTYSXUvpLJP+eT\nY/5mhm82n6UslOUSFNHZsMJFq+8EqJUQ2hPmWlU54tB8rFVq1BHZoZUsBdA2\nhFZGTL09iAlOz3Om5FlJFMkI/Z4AMT/aEJaxdCPOnjb6OhKFPLC/4gLNkvwb\ncZBXuQl4XA91GCHOA7o7nzKVy1dROzogOObbTbRHahbjoPYczlGxb0vIJdT5\nakwKewICK39qgxi/HwVNFgr1V1u35y27Q0AjB1umZUGsKkqaj5ZlZJ/K5Lq1\nJaxtM3TchhYfUOtxJs1dlckjTTQ/QrUPUJo7fUclWGUH77nHo0s9nwHCc987\n9pVUnje/Umz21ZnPUUvb5X1IGQp6QEedQ8g1S/od3RkN+Cd8hE5nacAIbJOZ\nuBTA\r\n=h6+z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSzTK1w9QbLEygVBgEyeCJNsKg2RhbJJvjPVW4OsXlRwIgHFFGw4BIyxnbrkWWjabu/9DMQkbS0N9umxewH/xx83A="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.89d27ca5.0_1601947630319_0.9774341043879506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-ripple":"0.19.0-canary.9ef2e7c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2ktFMZJidrYI0JI7CFx60hQhFmufv4WIqe8I7qrrYo4EbwgOKSbjoZaIcKLGqm8c8TnJd/Qv02TK/fOJDgoXZg==","shasum":"10e2cdb2c63fb575f08ec5845be179faad67d927","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhjCRA9TVsSAnZWagAA0OQP/2nNhZjaQUBFaZEgmskA\nLDBORJ00Qml2K5BamxYgOMLRZ005nyj3R2+PBVl1GrIt6v0WE8a5TBhOkRnK\ngAROkVQgUIvHOkJNS3r7F9dVf6lkoWAw2gZhQMsbpDmZCHuXgS6nEn4rLH1g\nccv7aXidAiFPsEivvXD1cAVcLGMwfHSsS7HH6yBfqlqikO28yvQIoLNx6pYq\nI7mxQh60oV6GJzKCIsspbnNo/rQmc8VdzmZ/idu6EcikEyZD/CGKyVx3B8ZY\ndDj8TQIyMLfn/kavjFe94WeWMCGfEs2MADqmfljjXP5JVqjTRRRH59Ntfsyc\ng8npQ/+gB+Czhj07xqkMMMJ7S/2aiLVF3BMOFEYLVNVWvwjPhPa9hCYd5A4h\n1Qv38VSIq81PhpppZ9yJihOecDp9BofF0XNwB5sEgvLZ6blpfG3p2fMgUm1c\nXTpokA4OVNDYgrG/T8notKXmb1QbaKK/MIh5yuPQqQ7mluCDGfq29JqQoPGh\nfHZ8+m7LyKbAsBplAg5YxgU5dz/ftpV/tx78Zo9EroSlNSZEDC+1WhA2nayr\n0Qc3blzvstZ0C28SCnxbriIHkPYaGroubLs1idywAYuupsi7X49RqKo/a04v\nL+Rp824T5lrhzWjKZz+QFJyLjfBPfiRvm4Dj+9tEYqjs1Ocy4bu6WIwMb6N6\nrbRj\r\n=Giu1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBWho7cwsqGXZaJIINPFQJtjT06pBQ7pof1P9im7FOuAIgHX79BOsl3wVCEsOMVpiW+ZgSAt6ar8gkiiJBfx0gHUk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.9ef2e7c2.0_1602029666614_0.5961826037324809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-checkbox","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-ripple":"0.19.0-canary.96c8bdc1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-li/5US/3bwovOOKh3AfQJ6jz6q7D1ez7CNcAPN1CKQtQncbfbolufdgYA7tUufoI+duyH6JuKM4ERNR0bGZdng==","shasum":"37465fcb727b54fa5242c9e7e26e2ad06189b9d0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0-canary.96c8bdc1.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAVCRA9TVsSAnZWagAAOlMP/3lSDXvPyWHb/Xr3neAi\n3vIJNqUAgSP3PYcW7Slghzt/1c3wb8jmo7U8j3OXZbDj+gRKtQJgUbhW9EH0\n1FiiukuAIuD3j+RxGDhfXkmqfR18hE6SjQLODJe+w+o03OT8aNaSo0aLlKeM\n865eQhfqktckd7RV3lrQYIJQ9i6U7QiCuHVC5VfT1EusakjEFzaVrPA70B+t\nS6FJoibQCl8gg9WjZSoOP7FOgcVRQtyTdvzibqXkUnT6vutyWdQ+ATucaPER\nJXDvSKPt2VES5CZxXmwl6I0I2hosnAulfjTEcqH8eLj43HN6Es6rgya7Obia\nOIrPpAYK1UzKFeWoS3i6fSOK01Hpkz1DD/FLIlxKfIlGzqKsCzZExpNTOl1s\ntxyJJOkvP0ZtSnEUcU4XimvTcsDHTObGmTgIwiAZ2BzFr+5Na9Qd4C1bTF4L\nD5AqZGOsluYLn1f6BS1WfMUcSxsxkdemIbpax4P+KEGKbB6CGCf2YBmgnZSe\ndbReYL39BGUA4Y7a/dbThSBc21jTEFSGuZdnxxXF0ycrFgqTuXN8Nv7yUi45\nC1R2HrTV8Li9O6a0dlE/gojV7xSfp4V35R9OG9RULG14KCQv6IisOSnpmuc4\nEMeQhCErcIHST3a646vNPCGzMtEN9J7GQMvotN+hJHG0oa635QL/6Ujv0mY4\n+Ci8\r\n=guaj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv4MPYQ81gYi0FGPJbxSubLrLBYsCAIY9dPxQRfQJRsAIgKBxfV4hDiYDzzw8Pd+53tgw77cBQxiWXv04V/SZtt+Q="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0-canary.96c8bdc1.0_1602101268417_0.08030857974806094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.6c21f034.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-ripple":"0.20.0-canary.6c21f034.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-H+d530ioQlw3gj4Y+kv9zxTXbYez5bUCqg42nyT3plLtQC3sVlwiKbf2FlMwUIrLdC2tbAFsuM8vXtp4OodKMw==","shasum":"0b43aba5022e3d3fcace9c4cbed95f853a55f038","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.6c21f034.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGMCRA9TVsSAnZWagAAh50P/1rLOs1Iz1Ba2WdodRey\nHOmImohlJpETo5dg6lwoSlaCSSvTU9GCxrDCnygsygUISqQX60kzEjHx2Mp9\nucXWR8Fteih7AYYA/0Wy40LSU3bb2J7cFxbInWNlUztxb/vAFhpouhMwtCJs\nc0xZ3lvQBBSSEx/xuSe3Yd6VDK3mLbFpUPm93GEeLSR8x30pgohL7qj8JO27\n1jWBgh7rEI0YdDnTsTB5ov+cJJDqSA2PJruMpdwkkR+y9l64nT/5azda3E7L\ngp0QyPucEm0OXFLROpS6ryoCf7bDsfYdd/uGOq25KkNW6leKAnJviWA9mDWR\nsh0WVF+dkkXcUP3Nj8JNeHFX4i5PyTloIz+XKKX5EpsAPf6LoXmi82CuYbKF\nnAUxvIupxyXf3z715vn2VtmTr6smrUUT5mjBqsBvw/n512lg1iDvy1aIREmL\n2zjn8JVRKquwrxI7WxfDZsBYlXJKiJIicK35/8CxI+avPNZCIhj/CJTC9JY1\nERejqnzdR0JFB74/8FE+MrL5oWpl5eRiTO69gfQf64Fj878jLRV40ilocr09\nS62hRNwlUlsbpTa+LPGDV6K6YkWJlV5YmQM93yiLtgcrSe++h9Y5l8SYD1/u\nwQtAj4Twwl6xQzmphy4C26YUAm5XonbCrpFn7FYvlFTngqfcT+RQ/groiftp\nk4En\r\n=owGA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC18lbOaSkyPO2OvzpjJbTcBarntVVCKq6aAYQ49e5XHQIgEmkh++FUqFSvctpJz9uv8UdTzQxXn98pDigE0eMeJ1k="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.6c21f034.0_1602109836414_0.04666101801830691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-checkbox","version":"0.19.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/mwc-ripple":"^0.19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-B8zRL1Z++hg2KC6TnMS6y7EPfo1Hlh+bcF7AcynQjLff8MNXDzqSX/8u2I74FqZAFpt8ApMe+/Wp+xU8lFPk1g==","shasum":"726af8be6111280fd45ab2442ab49b38cf901867","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.0.tgz","fileCount":15,"unpackedSize":81418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIxCRA9TVsSAnZWagAAlTcQAIzWLWYz81gchmNv+9fj\n4pmX1eKyioku3VCrcfqcZUXbr1zLM/xGe36Y82G86MQwelAT7Z4gJ1H+DYoB\nr7HzRgnzH8UWQttvuPinLmW+CAtPb3t7wAHUZF0w1pNLdfcaQtAZgGKhsZij\njFDTLgGX78dwz1xr8eX6MuS0X5/Q2wsKNNBiO31v2bV0gSUcBRKJJ2irZMlO\nKpzmFtBLoVDyaEiC9sbYQf2bdskKjTfEzX36qeqFlNm/TnvM/M9yTbm/MG6W\n82KabRMJKTqLiGs8CFjAxNzBbKU2x6sXwvLJE4KDmCnVNRki0/B/Sg3sHuFY\n3LzHf9Lg42Tvxsh9z6dr1GnB4ePOlB5eh3vyMRbrZbbPSEmn7wkzcB5hSbIe\nMKk5Z94GBX6FKDsoO53JbvuwqnGMM0NNc54mqtT1n14eQGXAwMTVxdNk3H+4\nzE1gJyNPP7ffefCg4fsAGwTbJmlHt6ORHjU1Lu4kDg/7XPbSBILAbnQPMaJ5\n1pkeeRtJmDM+ZdG6VL6Fa19X7BHeTllvVQ5lEH3d0Bx3qtvaonRVcL92VdQa\n7GcDspN8kBINSwEyoDzUhi6JcLflzcT/pWVrHQrQqFMPhPFflPlQYEooRjPK\nllwiHI7Dram6Qb0VfcPpFNVQ7dGQd8vT4tx5zxSVoiwAVm0uHMO0EWFumpFT\nKcll\r\n=iVTp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGaY9TdLK7S/yVVj6NhVZHDRwx4WoMUzhCu3i531+LeAIgRqkG7f13AxcqzNpBCvmufFaMk60y7P6H5/F0MCrTRck="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.0_1602110000988_0.7327172928643504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.1f026aaa.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-ripple":"0.20.0-canary.1f026aaa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CAauF0dxd6uztjsG/bjhRYbSgcpebyULxwlyit4Jp05KEBZgSNAN25YKtW6UnSSo05Ab8v+1N3HQgi2hMJZnRw==","shasum":"6d42966116b93ca630084da9d8b6db7a32fd3f7d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.1f026aaa.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5h8CRA9TVsSAnZWagAABosP/1p8cdvgUSfMnLwwMPX4\nXLpu73zZu8SJ34XinsYNISuzrw2dbR66oKCdF4YcMYiESp7l3U9/KA001Ijn\niSl4eseNcYq7jLpyFowOs1zrgHPaN2P82xnOUtBA54xAGOzsVwt5IQLS5LIq\nT3AljajC1KtO/04WHzko65OOQr926vcWOGHmBajPH06ujFOE2tZezD74UmY7\n6ts72/PoJ8nPzlG4kQYvKfela4nWQf1PSbvlTplZCFH7GAtUY/RcK7LqO/bK\nEy/uD22P6Ypit07aTHovQcMUanT7Z2lqY9dqgJFsIgPTaEsTZhZriD+NS6Xa\njXcz63ENxdI0opVT9bxl3GFPKCd5pfzPLtRKVQgOEJotIIuXoTS1RoSC7GUf\nrY0BShp3YJabHG/5WTI1lEKRIpPzq1BAPW70Y8naTtv9CVaLRuACoH2qxBWL\n9bqtnvL0C968CcP0zVeyDvRfvx2Ughft4Yej4gAricRjUIAIRlLCs6k2gxCm\njbzwM+h8MUQGHpA8gfSLiJ8ekcHQ394yf/1ToAfP4kkigmgLfAUXF2obhva7\nV8IqJoBOuRX4SmHlT8ipKUuwKcdqjDg/a175W5oFxMgBlooyLyWCMaqRzHcr\nEe40ZAJuWO2RPFTUrPB4xY0HnQLUCmyKjCjOSQXdkTY6FJEIbXT+BSCCKf07\ndw3c\r\n=/Q4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGNmH0mKROg/Lr+NMOhjF1Myhw3K5Dbp/MXTBAhQBF7bAiEAwcOxNciCUTnSrHHcoyUUfNM5l4sKRg3i5zBtsjKJdBs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.1f026aaa.0_1602197627740_0.33512598834085194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-checkbox","version":"0.19.1","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/mwc-ripple":"^0.19.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-pp17VHtSqqLjEHu2U1SnFeqmLgjf5Ek3DNbzAgygm5foGqaXnQ0opn6bS1zZYKrSX7ZLC8LjLo2jp2uZXFEG1g==","shasum":"c8196b6582b42f8bd3a5b99a4fdef2470d905f32","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.19.1.tgz","fileCount":15,"unpackedSize":81418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tPCRA9TVsSAnZWagAAj8gP/3oZ9KL9nv/l3uzWkM33\n8qdRGKMVY5WB2w13ZspM7tdKYn4mhjdNpoT9mwW86lq87e0JoslbfypaXStZ\ntAZlnH8VKzXwmHNHokYzJN2PFhXSZeK1AMhwHNQMMx1pIcwypudAIzDxrOVP\n0sdBIfYGjRXUnWW4IZ2o7P7SJitKUzbF0UQsfcFdr4oBVfem9d+W1AwHNpJs\nAGcsqrP53u+Nl/T1/TV3oHHvncsovhmMdoPpdbw4CPWXwVV+Q/oZ084vX+88\nBkSLtCR5denNrJHyrE6q0OEHqga423K+uocMomUKaJbEnWmEVbyT1NNeCa8Q\nK8fK5nBM02BFxD6fXQZXJcaf/AtXPXPAuzB5Fa1nOmJhtHqVPT6BHYKfP9CS\n0J/rJ93kdn8xMTfUPAsGMwiKPPh8s3HmvTypdDOqIMd2+WMrmbFlq2gPxSTj\nSSt8vM8FjI3i8Z/ekRFJp440cpMxXDhWvIlwcK6MPBFyW25fDSHgqxacI6Ch\nraVXvtOt9aRAGHUCkFEeIVHd1eJqaSxi37lriJmY4OyxptPgFpvaOBfNHc1V\nBtUqiUu9f3tj/zbytvH7wv88AKZkCZTl9YEGHrKlIn19ih6Wez6KVoduQirw\nfxkau13g5acsxut0UE6pqmoO/lSM4mN256G0ttP0exoaiiBpy8mXeuSEaIM2\n9ypU\r\n=ycOq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCg4Zxq1eGKDWq1u65Ky0EiWmzWa2cYsTu3ogXEA0IBpAIgbE7S86CBpbULvl2zfvYnK1firFo7/3HwPl45+dfZalQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.19.1_1602198351583_0.2718177812913043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.5f6894b1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-ripple":"0.20.0-canary.5f6894b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ArXVjx6+oRUsiKI0Y9HXHOQzdjEnU+0Bwj2ebtDCSGGTj9pHpqwnNKlZqZgx4UWX93X59LPNNyUnG54Pznditg==","shasum":"f593c0c0585b81a163653ebcca8b8ec7cc18ce8b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.5f6894b1.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5uhCRA9TVsSAnZWagAAg0MP/RGnXPq+otWwIR+ESGM4\nhWJWiGgx6jRXvKUx1V1/BpOXEZc9WOXHg4u+k+fXT36eTqiTfQSOCoYfkgEO\nX8GvH9Gh28sDviPEeOUtk7WxV30q/4zfY3smsX1qFOUXAa/a17o7wDj2pAac\nP39RKlbrUuZOzWOzse30O2eSkN3VABwk78LaUXEgQDzhsWnpRgD1mDNV+oGD\n9RYzuEr1uzz5U7feO1w4C3+RsnVS7oDSeCYFtMKOQw9WhOrPh+d1esgV51ur\njnHZ37YlxtK84VdhWUkon7sXnp3c9Xf4S1dqT4FupLtq7qMziR9GcyTIqvUG\ngWIs6wflSyDHPHFClgvLEnsK9AK+NPu/N8pPUiU/G5FdDKfRMRFlLN5B47fN\nM9Xy+li4dIopknCgxp5ieOvzrWQn7lKbb3vIdMw2gdQWVV2qDndMar6utS6P\nNwom7NQAbmUcz2DWxGI8Dgt+HlLLEDo16E90GHjI1y0dLOw+UYbhFj2NQOnk\nyWOgsHzoW4Zv8BYmGcd15k8HJoh/0uPG39oW0wOOY6RxyRenClAFa5fuC/UR\n55PINDgLClClOWAjqg8+KT3U8rkGehyTJD09zy9+snw3/e2bs60RsKZUN4gW\nU4d9w6qgKa2Oq/YcNptj8nyFAJfu7FKThXtdCKEBdFACLhcG0SrwtvB4UB6V\nT2Zd\r\n=fV9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmyM6QUQ68s3UsGLR6jJ76iywTrBVgLbsxvMdaBcMtEAiBCrXOQKWaM75H2Kvu8Ft88oZLzKxvXMHsTgzNdmkGS5g=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.5f6894b1.0_1602198432804_0.7374865599669234"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.f6260d06.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-ripple":"0.20.0-canary.f6260d06.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6kNg6GJFgqUpTF5hYkbe7joAeFauJfycJRv07DpkTKa1hOfeMr2+El6erQyx/REvkuIn3dL6Cc8zmtnfBzsS7A==","shasum":"5df383ac89e334c05617c1cb6e73a4ff43cf0a6a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.f6260d06.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnvCRA9TVsSAnZWagAA5McP/jpUetinarW4YmRAuuY2\n6l95L/48KBBb5XBpCFlKDdFkrJvhVz20PDUXtOR1ERu26AOGpRxrtXTgaNux\nzsKyP0ui0dm58LEA+Y6DAYn6VQwEk5J7a90unqXsDswa0XBByQKqNyjri5dj\nmeyXzX+Z5VvUkry2+0efbJqH36BhMDqf6/5TWZtgp0qYgODwpghSSudY1O3C\nQRAw1NjtqrtAPIVrpPAEQN46tor+DkqSSvsaFOg9R1KaxWsbKSw9hh255+Lh\nFGWzh6dR+Kt7rer0JzJSGk49ED9UNH5UXNVc7G+SrsLOjusjrkSVI2p+wGr8\n5FjoDYQGOSeS+1imfSV07TZEUPlGQkcHTV6eCxKFBsmocNrEm9Y0s3XasXwM\ni+gyBAS5AiHx7z9gf5qRoSNW0a6CVMiel33Qh/2P3/8Ixgo29btALJRyoTeV\nXgjRuSMHoKIE9w5c0607q8bcBWr5XAPUbhJDCdEYiwn9lGRPpub4JCivdRvU\nw6DAeNEHfdiW7rCKOYk1PIGi8H8+RjF8Q4WLQ/8lcW1RvimEVSneE8Gx8bgq\nShMG5+frwC8oMvbFViv0O5htheZ3CuXQB/oYTgjji8byScx3pjJDIgMRxjPS\npiCl1kVIRWtq9sVYswyQpWbrWkQw13m87EkYdK7ChK4WtDduk3RsQtO05534\n2z8v\r\n=Mez9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkuqSi+66MWqYZ9V1lofONOgm+v5N+w7mCH2PD1TIvVwIgbaUzgLikVtoM2ItXSMBtvMhyN2SA0q9GlnAVcF/7nRs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.f6260d06.0_1602542063177_0.5166768147981833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-ripple":"0.20.0-canary.2d1b08aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-CykXYkFv0J2K2h/VYTl1YL4Q7PZEwyZp3HYFk03XTTLsjxNsMJMW8rLPcolIPzdFG1r4FQaonN3MdRmyFtmyyA==","shasum":"ac158f14922330995f0e81d7e10b23a5d00a70a8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.2d1b08aa.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5qCRA9TVsSAnZWagAAejkQAIsfn7S3IOvvS4Ne0t1Y\nYKwqO1e6Rg5AUx154natiSXYGUGxCiXq1aTSYeAYgX6e9R70dBQm0L9NVpV+\nffelaUMFpPe4bEyVaWWZssC5/4yupHoBiaLrewiVCQz99kzfR38/l1JzcszW\nHdS4c6ZBoiWnXdNBXiKS/yuW2M+JVFMpkmn9fI26zdNjdGLW13Uj7V3DtAja\nQlK/mvfnI88d/2A+hSC+zOs19jbfUwrtVXHNReKuH48+9vS6vjGTq2jce6/s\nG0MZV186p0rKQS1ibkswr8qVNovednqk2fgcsA1NUbk1dai3tSvY93ufZtK8\ncSgpDVyJDXdIRrP0mBhZQdI1eH7NeR+IeGPew+ZnvCo4h/B/fcXmymRUy0Q8\ngn06x2+MY2nS6TonTdYWvnd9/6zabXzhN/JFi7sMukxTFJR9WoiqdA1ducQZ\nYxcH+YjgyeoiItIrRtesL0hzHdzphzX08Nz3XHjQheMXeJjm/AuSk6dVE1iO\nGJdK5nMPDFPl9DTKshEAu64xEX/GIwbJUc5rsW3edXdBy+laqU3Yma8jxSmz\nNd3KsSM6lJLANhgcwwFL8KGFFXY4oLnxyZD0J/lhs3uz7W7PutS5n6laGN38\n5OuYNviuH4//8tDeB3J6jv+aKjkmCEIU2AE2z7xu6VxuN4bm7mHt3aG+Rr0D\now8A\r\n=AMFK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAh8KvjQDWK3fU8OL3fAqcG1xdrcMYTSbsERLBpRIJrhAiBhwHiqvooeVr9ebKoCIJH+ow0vDntpUpGjxxsLM5pkIw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.2d1b08aa.0_1602616937741_0.7024281117228681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.5bd58844.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-ripple":"0.20.0-canary.5bd58844.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-La+JzdWdBF+JUA4tXmokxpWIFQPl8QQ7ecawMADTysjwp6UrKu+2jq+cqCEUk9k5kdmaFSEFGdFJcqWZ2yadSQ==","shasum":"3782a7cb4dd6b2308aa0c284d373bdd935e2d08e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.5bd58844.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxRCRA9TVsSAnZWagAA36wP/RlKtz7ElVeTFQlFLxjW\nhQB3BKLNJXlXh33oyrmVoAAJqwENLwclGvhHzyMoy2BvAW+xDa7WyfWAYUzS\n8YuW06Bjk/b8ewl6u/wYxhnzRjinZxeOkSJGQvrgq8eCWpJN5b3GfDEE20J1\nf00cJk0qCJUabJ8rpZikIE/4iNQxfB/QYeexGpf2n/GBQ5xqvfEHAbg9XZg2\nFivaJ68+qN7LtV29ngph8l6XYRJL/YJRkR03M5bosLDfv77pCzE4m1nlmDFw\nqPVcBkMEudEw9PXkIESK1s9bGwV+fdJsRtIAFy3Jx5wslbPFFAIUv1JRiQPo\ntF5G88PCqvHgKnt6cOXZmh57eVGsaCLnNfrLBi/Nn3Q1JV8fl9P1JhV0Skgy\nwgyxU3Rw4Ctz/daIAOjt8/s7DyJzfEy164uYVh6+eCIUaA0WDtn2W5nyNJUX\n8OsQmBidTkA1hjjMvk1G6TI+JRwMiPcfetw7ijhZncLDyf0kFqkTgmQRZgGt\nzdIryi1okue6XSsLAhSThzBeUgTcyvWd/8304WmEDWAaS/zP7KkeS/O2QkVp\n2OjTJXi2HzAnNndnyrycbTvJ7nmwXRG8mJILWeHjABlJqWziCYgS8gqO9WW7\nLjjtlVe8tIjrPVB0xECJY3/8qztzoYmlw5tY7vIQTZhuRcK1KaNUkZqHS+WQ\nO+wc\r\n=wRuf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEO8Auo334d3vrai5DberZF9Qqx9MdHCxN6tXad4kmmCAiEAk9qLai0537uQTxMsS7Jp8awrmpxLa3LdpZ9ZFIR5jNw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.5bd58844.0_1602632784628_0.6948998933211161"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.bc846b29.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-ripple":"0.20.0-canary.bc846b29.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UQezAiprdb8VN2szgwmINsZ0X9au5AtAJ0X6x5CPiD0VkmuVs2Hy9fkxAanOIC3YD5nuLigcJ+oidykzp0my+g==","shasum":"7498273daaaa28f6ae497e2e0ee481d369dffeed","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.bc846b29.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BaCRA9TVsSAnZWagAAm+cQAIXXdeSzSFC+VH2xpHP5\nIJ/FWUZjdakHcRxtD0gi4BiMuec+0rWdCaOiz0/gUGx22bHmrK2F79jvs/8k\njtwPmvEp6HimyFK8mVCBi/VOsrUtlzXfBpAXEqZaPEXz9/kh7PTjZPxpqgVu\nNjfEay1J1L4DAdqYhCy5FTPNGDDB7BCBHYIwH+57nLzB8klfHBTLL/0mRuPk\nVPH884iiExH7TDbYqaUa35PfJ1BzRvOBuMknu00wkB2xEp6PyBrgQ5+Zz6fU\njQULhSLzqp3rrm76ic5OzL7L1OjwG8LqZKrQpzIU9Pdrn82ZI+j/ytBBAO4s\nljadAGnnSADQWi6vwhJWekiAGhKXh+rQqMYGMFsO4MQQObhmtd8eqDRNmIeT\ncqJ+vGqOzqaRkigwmtMsfDieUQT33XFwMUi/r8id2/28Ok5Whmct7Y6ZiReD\n1QsUsORgvoC05YQIadO+SdBUjh9SEZSgz1EQqZFfBF28R/stYh18/31uj8ZH\n8qME+U7jrJvOmsw1IYtMrwCCtF1J9jNOKc7utsxbOM7VdXm4lf1iRNdYuu47\nUDo4nNh9bdPWaxs0ieG9agYKxV76GDGNLux/AFHIM9pc3oZlevg0nPhbStPr\nJYhgIEztly/5t2CID9p5BLoad7kzdauwB/IjrXSkzobkI3PXH3b8h0N3N9q0\n5gZO\r\n=OW2x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiMi0716RFTXC/rhmyuyL7RFv8AjeN1rRUK9Y2h1TLSwIgMJdnHUnej61On1q3JfxymdTA7PE50j5VKC5D2yAF/Mk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.bc846b29.0_1602699354544_0.2708916933334231"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.3280b686.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-ripple":"0.20.0-canary.3280b686.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QQyWVTMZwYI0FfGBai1ZM0zTaXiHe5NMbw45HrpEkzcAoOST431nkN9lFhTPSFFl433G0NnmT2RPh01Y4DXSbQ==","shasum":"4c3bd7d6e1432ca6b5364ce687ca0258b69d343a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.3280b686.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOOCRA9TVsSAnZWagAA2o8P/2vQWu4wuJE0NuRD2tc1\nsCv+j8a/6RMPc+QZsfQPBZ8ti3sHfV7quVo+Sm6iKgpR4IGXnWx2B80yIF6y\nMWobc+wPfEvJ3OtoAxACXRTYDIte4hACZSq3YwO/joAF5JOGXHm1HclwVVPf\nKcRNjtXaApihu9qxnB0YYSAIqEOpkurGU7tpH2JSaF/H2quOqKcuQOa2ekPR\n5kVQaJAftEkPwI6VGEkuE7fnacLLDt64SmHtpLCwT8jzl40w/ldk5yqbQegg\nIvSnv3cwXARI8JZi5NM3R1uD3sN1LmBn+xPFkTfQBaYRHH7nquY5mWhRZ6SC\nyqKtlGU5+heAeBmrbR7nDoHpkR7guPNCzoDzIyG0xlcRLdFXSYT+8yQ08PAu\n7mLSyFjiMzCocff5LV2BKkDueD0dBNmNWGja7sXo+vRbmnXBmNbO5Nw3gZ+J\noXoHDHEXNq5/VJr/rH02yFPFmoUAc92zckJFTQnlRkCvKFiYYGxQTS10Muwh\nAJofm6IA0TGyrpcZUCpq66m0stXy6LTW04NXca512LRxwsdhht5BTuXcrbM0\npzzqelZvRzoID8E5hxChjK3KQIRBKHLxqyXWDYIp2fF+7VG3cpNVWfqPnbug\nQmfuFM70synyyX4YBf/rRtKmeEKKu68oWKuz0IQ5C0xcakDYYNneccdxUnm5\ngKre\r\n=gP5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBiD2FykUbyA+WMT/towgSRbWpU1FGIppb/gsr276y0OAiEApMlAbWP4N4iwaayJQbUioeirH5xdQ9eY1GfdIoi+BNs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.3280b686.0_1602806670065_0.321206346724739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.9e94cd38.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-ripple":"0.20.0-canary.9e94cd38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-tlR6Ol0u8U7yAXP2e3PZ46yOqhsg+B43YfJwba63G8ewiIjnUcvYh08pA4keaJfAIM3lsPvVAVE45kQef/oEsQ==","shasum":"935ea5e507dc0d06ef83079213ac8e546df32605","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.9e94cd38.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig02CRA9TVsSAnZWagAAhlkP/iisgE0aothJeD5HpEoU\nwxdjVjzD5p6ewWEHBcpwcy0id+brbVj+qeSY27g1GzBbFMlJ8g8sDNJ/6D1x\n+769akQfiaK4wJvQGvfiyqWccOckUFtMOC4rTYejvDgKFkEk5XjR7fSe5Qvn\nACC4dgHuAcU989mZi9UO6g5uXBmd1MF8uqnJeN+DuUYfCFH3vVvrPl3+rSz6\nv8BhoXghjTWjKv6e3ZG+nNW9jzn7eq/dFHlzGPwhujTFo4AnR8MwW/DrF/VD\nqlyNFyEgecH/lTPgB0c7Tu6ZbA8tisVhGsVFdRRiXY9odFc3TQpc4artRbKG\nwYsRHkVg9RBDdcmFkv8u29QLKO+6A/7dPrCQcy03SGa9lTVwfftHogUhjNIm\nAWbvpzQ7T84tKSLY4N5desqlPBgz4QuUg1u3FZW4lLGMl0PszxV+8IYj27eA\nOW3CLORxoTz7uBdmb9FtBEW60dhyP/MgDe4R+ZVkMD0k4v7xvYoBznSztuOK\n+FXbU5fznA/ywCvzWdziTMxClX54uDb9YjMwud7SWnohGqx8ttdJX/hU+Z2K\ngtmx/oi5ViLOzb3ewEWeA5EavLhTSL7CQjDIFbeQVX9LbzGVgsAaEXbDn/pA\nWPLTGfe4ZrA3CcMSsqdSGPyX5paVjhIcrI0Nc5u7sAIwvMHQcj0DQ/JtbyA6\ncLq1\r\n=DCW8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDFIOT4IEEQUXo5hcmycAAlf3yRdkC3lNIf4RytntiuPAiBTA9Z3VVvF9PRp6Y/32l/xmja+yASDwbDXTGLV/tAyAQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.9e94cd38.0_1602882869661_0.6144717331521261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.4773c773.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-ripple":"0.20.0-canary.4773c773.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nRCYSQip31EOqPfLRJfPEvr5+v/RL2T5NTGBtZBjz8nYOwB9evRyBFjF+zwsD/qYtajgBWCVvRQn0DVUPdt20g==","shasum":"af450b8cd006eba9464bdd9e38b278ea4982f8e1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.4773c773.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/qCRA9TVsSAnZWagAAE2YP/RYI97+MDPYxKEvE4mPg\nHm8E+Vlw4JDD58dLdeVhQS/inLPH6+GyvjCPfP6vDvmYTc4LCYKd8bofyYS+\nERVpVeo1Ela+8anDjp0NQSEgG/3LXCnMvT2vrDrUpmf9QcO+4H7bPt+p0zws\nwvRz1xkNm9YDOMACr/RpXAmfKbiLUqbyJD4ALv9olDYoCsxzUzsGv7hdXkGQ\nnNELAQk5qxRTNJD4H0kAZPN7Lco6YH9xPYHGUT47rgvbyiZDmRJDg2LObegJ\nvWaeO31Hg/tpGrKojkOQQKGaP5y5sqOCTmwJz3ARQPOg4UNzmHAk40h0DMqF\nTCHsUDeoqAFc1392ccCYfGL4BW3AI24k8R/SXsAwh5dwrMvzhMrFqrdzAQii\n57WOqDuWDwrL6iF4NRGo5ZkbUUpD8q4bztlQUyNP/J3+ppditkO3whGS3eaG\n0+T88s9MS+i20AyqSIk0lhKPdnnIoR33ho+ci3dtzbXyI8fS8xonT4SobUCE\nA5lcULAVNWYE84v0jJj46/pyRbOUlbe3rs/NKcZRKGqy+5tQuDb7hbuSOdxC\nyZPHtSazj/eDuUeBfYBIRFxt4NgyWq5kbNk/t5W3qndvN8MvFMQhUrupS0vh\nmcmYWj4L1V9RGd+77gG8piA5iPzHk7+IqcheS8Kmk49erI30Y6o2g33iTgOE\nOQe2\r\n=mwIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8DBDDT+Fz1Dx9U8BG25NolRYKzEGYE6TZb6K16NBJhAiEAzgTBZ3A7QRjU/+XblVvTxzxjzw1iyWmuhxSX0CpiFaI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.4773c773.0_1602887658028_0.33079954415158896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.65787913.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-ripple":"0.20.0-canary.65787913.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-uofBXJAmJItMeChwHDGB7RYoZzMsCrCtQ4H0b5nzxhZL0tNqAQP/F3+Eww2ggsd2oc/sE89GbdPbbdqVaKlvGg==","shasum":"fedaaa1ba23468f6c1d57376897f1a988f218710","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.65787913.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAaCRA9TVsSAnZWagAA5xMQAJv0uCEQcwuzljC4wd30\nnjApru9d4JmSavFE0YmE82mkb/WtF/4EwzbkTixQKJy76E+SLsAHNHhVETNj\nCRONOENd/efXXWD6sy+Wi33FDuHr9byGa8mMtOMiTxqrVH91mhXTxSzUwqt0\nyG+oh1F42XUSLIYr5KISsV9ZP3yrx7N9JOgaa7yF6mnFHSJmBK0sgDcxPBgs\ncsYVIz0fIgC7vE+aSU+MRbhKNHWjckoRYNknr+2Iunc7QcPN8usXXl4bJI5m\nJUYdGIukshznazDM/aIoEw+Xhi7SlMWWzjXXbhufbwx4kXj6O33J+SEdvW3Z\nFyeJl+WsSuo934mNYYyZKFj4EvTWNQWKN8HD3u3I54ADvrQiMCh5hMv741dj\ncQUj3ebez04P5RSuqF/DlZWImsInNdP6qmE+T/EhiXjtCorlkAlc9U2h8ls5\nPs5ynD4uTm8YHwU7kl2g5fStHKgJVcc576XbwgPwBWkQVOtjZtfzQQ9Lpjhd\nk+qO0MnoCl+66KqiNG3L6NhRe5gDq5yJz4CSRNC4hBOAeAMO9AS/3T2p2uqh\nu2kQO6N7rC26tv6S5Qna3GV9vUKHqw5NTTKrfT/sdMymJ0PQth06oaYEawf2\nVMSGALIqPK6Y8MfPK+M9KBAZB0gG/1oJyMjf6hd7jjWAcTYuckXgix9ze/21\nh5jz\r\n=PnLe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwlFXFRPLUNrv9G+tZRFidH0t28pDLv0xDjhdG4ph2qwIgEjf9rB0+wO8m+MOyechF4B+XJawHSH+KKlCLpNlr4rg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.65787913.0_1603133465998_0.434336505345313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.5485fba3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-ripple":"0.20.0-canary.5485fba3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Fmu5lhlL04rYtemLGSm6OsNG2sGs825f1mKPBDadr2AhzPD89bQs3R6nopjMjW90r52CzjoXffW4+BC2YKI5Pg==","shasum":"56b45b845cbbfb6be8f0f2311963f5de05361c19","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.5485fba3.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQBCRA9TVsSAnZWagAAR8EP/iJsuKbRYfdxKVpK4r3e\nmbc9QSUVB5wgnvwVTFgHilW1fs/5vCW+49UQF945c5lgiD11mU3xSyhHhm05\nuAJVatHqHIOD1TsGBJZ1SZyCyvf06tg6lXpnfopbXTp1UuL8AmWcmyPfi3WI\nKsGqPCAZwHyU+/AjTb0fgyGZqii/nxK97icWWYUNmaKCDceLWV5WWt+O1pzK\nw78NPT5vzi51aV2CGYi7Xni8NQ5svNfzYzAdI2LX/nB6/O+v5KVhIkttOl0H\njtpgkmwm5F/T39oiPF2B+Y0pdDYHxMX95D+F26dfj/iG5brdniapiq88y4d0\nT9Ej0oDwlDYH/gvPdTv8u2UIs+1SPeQGnl/ni5yjA12G08mfB1PuoaFD2IGM\nRp5E6fBJ8yf9LqBSn2lPn8j2wQy8+qYeEPwIU5tL/Zqv/ubi0eeSauj4/Bxy\nim3Di88SS6vXLZ6XHcaIl+FoGNX/epXgKYsWFF+8w2JcanIjI/tJ+zNJVovF\nOYKKwEVxH5IoBD5C/z4K5DE7AIx4vFeZTfIc0Ouhx7ac8F/k+u5Q0mUVm/0t\nr186oFbRqdMVrNV3KJDJL1v5Szz0ZpQwO4e7s1pldACpFrgUyS7J+ZLqYnsM\nogOTWLCWwUtdAdrBimL9hvfzncADXgRRHXNgRT/8idYxV9JEpIQ01XVnnT5I\nxyqu\r\n=DP6B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnTleke60wJTsqJppeQL46Q+plwIln9z/MgMVJHJ8gXAiACfqwpZ2SGN4UlVNIqwmnKYcq1QNAvUUUw+Gl0GowbZg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.5485fba3.0_1603142656559_0.2283420935073781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.a39d0a92.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-ripple":"0.20.0-canary.a39d0a92.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QalnEfsti6P4zm7O4HTasMyQbvmvOP8egxG32JODCnPppV5ZigywOT/bbnm7ol6/koxxKSgA1bD3LXJmAzkpsQ==","shasum":"923a43bfbcdc5bb5c98fd6a1d45faf268f5cf18c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.a39d0a92.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nsCRA9TVsSAnZWagAAqcAP/jl/pkX/hsEB7ybQmCcW\nLxLQr/fRh0PEiDRgeFeC+77x6OUP7O6g0VS1nwCUof18QMCC/4YFi45/Bi8Z\nQlLRHqFypv4CBl3FzNvK3kXY7DiDhBcN8c27UIxqYMTQBfEtU7shFkhXo6wu\ne4Fp9SK9DuOBlTp10m4/U6ZNuPEtxnOQ8s3OUWk7oZ/FZR8Kp82L5hN0C5o/\nxgN/gr0cpq0iOkEZtrFvZNffhrnZMt3hV/6lAzWfazqWYPGaXia2aoVUYVsj\nRCutzhD5Q8vJZJFtErAvit3YIltLpTg8Xw9dkYeOeSgJXlG4ja9CCRej/6Ps\nZMeu0+EkkjlMyE72KtVhyktidZDNXRp/Kt9gijcP06MSV82ZfqV9Z1USE+ju\njySEHnDcINqNSlSt5kuTED49D4Lj23ffvAGsxkYzPOg38JOB4no/faio6AFi\nsCbPEdO5IeokkYEkNoydiKdX+jJjfFVgstvDslpCCIrgguAsE8qiyMyfpl2J\nIgY/LGg/oVc2KXvQrmLCZmWT2fw5xWQ90NJ8mhtY3VgEtb08MOnhRpsR8q+n\nnFjMfP/Br0gABTc9ib86KVXqknr/5avaJMDMA4qCUJ5lL1kYfF3jcGg0wpV2\nB4fNaHw+KWqbeNfr2RN+u+N1X8pQKLGxBzBSy0cJvKhpEfyCVZztaWJq+VPw\nnonu\r\n=sy96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHAIFjyaYlP0kkUW/Drg02/KO2VA8uPmuziB9xmH45vAIgOCeJ/6efc0VbVVCcx3t+ngGs7DNA3RIsCkUpb8/ULLA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.a39d0a92.0_1603488236521_0.2939874786709369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-ripple":"0.20.0-canary.4eafcbc1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-OoSzcM8dqbUjE7QGULM2UlHkpw2j5a/5ofDwU8hErXD9CUG855kblNStZuau1JCmnG9T8vEtAR3q1fWz7Es84w==","shasum":"5654f3dbbe81ec720889319c4f57748861de8d4b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.4eafcbc1.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YDCRA9TVsSAnZWagAA/UIP/RfT6jMSZX07V6cHRCvp\nNhSN4Hn4rM4vr0KUxiNo6mvc2NRtnyWFWiDogM/bG36ZKs4fbv0cqrFsIjYW\n+iemKehZR5yKUpAghMjtSn/AYG//MAEzOvzoLTgPK60nikktr4tw/2laRmdD\nX0/2D9WG17LT/V1mWMmt+Gp3BsWr4M/DV6F7w1Xp8PrOqOooWAms5A05RqfO\n7/N/HXE0/04RLIa1byDNBMQkX8s1BHOtOhl7rJgeYOr3tStxY0rw4wxcL+NT\n4I9MFoNKaSIGvFCgxJFKNlRaJvTQ9VkMnts9d8JXbhEUjLb0E64iyYU68mua\nFtfgq3glWmtNyrCYWBYQ47qy879Oa+vdJWNRIzJBqIpVG9xqtXK+LMxdUsw4\neD6kltFBk7zKu663hlV0h3BRjklKIW1ah5Tee9BKY6I64NtXub0UgttoFfSg\npvu7mMHneZOjQmyo+7OsdzvC/x+opCEZUpwAXi0h4Ja2530MYoXxZwd+LVGD\nPlZfVdEG6wTOZFS46mKUcgwp4wBsHVoBxBYrXCs9+0twtN1o5uRNJ7F22C2T\nFWRUIdXc22GRAm3rvg6MxXYBmk7Ne4H/PlWRkkuQLAlAHXhEOAkrLsyitoLn\nc4nAI4Xhqkni2SklOIeQ++gPVlK7oE3uvbR+M0dBH2hdlILGrh8j0y95upqc\nuxEc\r\n=1ZYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5Y/SOApwqX0xKEgcBoQThXM0zz22DuVAlLLgihaJpwAiA4wNaM/oUbNUx5VBA3hiCxGDqlU5pZJfhJhsM6UWNyDw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.4eafcbc1.0_1603761666665_0.6808986348553325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.32961593.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-ripple":"0.20.0-canary.32961593.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HTI00ffDPiyANJ0JaeRqCchVL1QCJ00QuR2jvpEA4ARwKZPx/8DY/+4oQspyA6VKxcsAJ+HMd5u9p8n3p6bX4A==","shasum":"f57c451e5efa4ffe672dc214fe8406aebc69c65d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.32961593.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2uCRA9TVsSAnZWagAAlz4P/3SkfmMWModA9pESLGTY\nx+EccV21sJbTG6Um+pkIrAW4hkzEkNIdNT7i1CeaHdKXxUA9H+/Xd4uBCmVJ\nywWL/kAXdXGhE7PMuij85HuBsl8QyhKvvaegjJkoNOYA3jw+6Vu/k6xnNPlD\nsaThDvjBjD5P9Fe7jMfZuubIw8p8hLrLf/YJX8N1hp+Z/7Q+yfNhtZ7m14gc\nDsbBXPpqNkZtCGnHA7mrXmFWhF6dRuNqgE+z9pfA+AnkdtD7jU6i5ysNjtB5\nfACDlPFHlaYPZuztHo2c7LXDHwAER0GgEyaqIawTRhqgNP6nnbr4YI5Zw9jP\nEDHzybvnwiAxK4HzFzs4IHdv8Ad84A5OCGyb659bvsWoymYfG4cVxcY8GnAT\nAY3PE7po5eX23tPkf9BxlBsKdLJA1j7eUwxhVKOGLh9F+I0tlGB9l1hoCgeU\nRnYA13oVZHFtPvxwvH2LjmnvLAqPz9+Dgi0IMYegfOn/9VWoUHrD3cTV/GHI\nT0lLbBRolJlzDiPeSlSWrvX3bnTH7UixmJyQtn33TQXfM2Bk0aDrzO4mtSIt\n8cvhhY2dOeDa+pYLIbDJqFbiDl4K68sVStLpPsN5HebTxT27oSQ5Z7DiCGaA\ntzfmrnMFOqYnAi8ueSHlonOpWun0e4zClyoMhDRZH/6rN7OVYsC7AzokFEnz\n1u5B\r\n=eOeD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0J9O5Lp4iMtlwaZUUMS0h+zNbhsoDTVI6gG40qO6SAAIgd0nWMk9N9WJeU4RN5Xwo5K4YPKpyDQphN+Jhnd80viw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.32961593.0_1603845550269_0.5252834668204476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.8e3a0601.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-ripple":"0.20.0-canary.8e3a0601.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-33Ae3Zn+nVJlkO+tf3enne1eJ3XQZu4eKeJ8QhYCsQQC6lNH7UyW2+4nSI37+c1rPFNKZw1E8RZPtEAI921SnA==","shasum":"d422c3269eae8779cfcf572615e5f8a9cb4b3b7a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.8e3a0601.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYACRA9TVsSAnZWagAAn6AQAJHatby0eDyxPCOKV7IN\nEc5QUGlFFHCNxj5bCdD/q6h0hHuSxkqAJSsWX3tcBXv7fCE10d3fUnccoNv2\n2BamSZ/hoj2WMlGdhAvmnfMBnZrHmb2tLGR1rTFaScinnCiZXEkoHC6CrmsD\nZxiYy9mIVjv9urf2WG/5L010rZEx7SIVSZpnaWuXpfEDMEZ6sYbNbOOeQkRI\nE23cwFi50cVBsR6bKKCflo6EKn8mV6cEmZoRd+DfNTvxBeLHNjz9ZOGiPgKT\nZmDta22kkO1r7/FtYni0Vb1KXfnvsBmjQ5Jhe3SJX3tw8zPvHrfi+Og9pgsC\nd0YRihuuR+ppulAaO4ocNpHDhJvO/xGJgrnJT6VlrtI6AkHzPuc2+xZFaAKI\nH12S53bhhX1guQv530/cAV/FEuoK2DL8hZgu8m8/5N4eQ+1pyzY7FJV+FvB/\nUupGzhJcXVS9C2hvTbyPPMbIkQLa8465XdnRg8xevFiAUDoCSxUetSZEGt7m\noU/iEzphvhP/xh8NNprmIEJFrgMm0O7aYTw06pxWmv1+htYTtdOXlfkKDodm\nBs7rVx57sFg4idfakPl4hppGlLJAYy+jq9k6Yc8yomjUpHmBo9yRkbfONbxh\nWDKpLjsdb5M5Qf/h8GT+bSVwG1anyX7bMfeWSM8dskE2myr1T5qDLJIjWYbx\nHi2K\r\n=6qXg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD69Zg/+DNwVNf14Z6ESde8blYrV/ByI2CN0PSs56Rr2QIgFzYYvBQwR8/6pTAcbnh2j1/V6RVclThoABmJHjkQyY4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.8e3a0601.0_1604007423441_0.7132088601698023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.178c25b4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-ripple":"0.20.0-canary.178c25b4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Q0tlzN70IcXzMArJHyb70ImgaqyODrFfhVTy0FFeew3eVORk2JvqPPzbHtHDJl5s3TvQPjcRm9EIbE9fSSpRUw==","shasum":"f53b7ca9fcf77d09db861e433da9b660229e6e06","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.178c25b4.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzk0CRA9TVsSAnZWagAA14oP/20jNcPrDDJ2HQRNYLcG\n6O4ktcfGnGqhVbnTVd529GQeOvvLwLVqZqJx+88rDm0YAKc7ywfO1X8CeW5q\nhq9MWuW7cMAmvlsElm5XxVdmk9InykSg1b3vhuF3hn0+2TEAX6h24oKUXcjx\nFAHuY+lQiC7Ltp/KtJ8xnhhpEHclWOugKWWhCAHTwfCfjEf2c/6GtxzvZtgV\naFBWHKGWfoF+6bUgR3H1ppsIXv9c8gZDCwdn8hHC0nJ80ntxeM2lKuT7RzaQ\ndedxOHZ7MlBVrU4cjQgpzchvnb/HRNISfk4rYmJM4H4RJxP7YmEjYvHluOXo\nZkHpRt5LhE5W/BjHGQ3FHpN2HoG9lhDRhynFrg7doyJwyBs9+Ifi0K0hB2lf\nmRz3CBqKyy6NCvhQkl2WfamNueYtii203TIqmt7fd8iqKh1GIUYzwuudPd0b\nnkG7zEuxMlk1/u/CZYLywv5ppdNdm7ZYGdP78skcOEm1EJcq9UWEMiM1dbfa\nymOOhDVpJH0QnJcGxHHMtVaytaY+gKD3GE2QsajippRNM/ywjpoYskDfJuks\nYFgHzfbbHQJmdIU8z3iuUhkWtJga0EF81B3LPQcHILq6oSjlzt4qUpLLcw6p\nOWdewSkdrwS1J8ppxVaFyPdLpshYrfoTBPQ9Tr+kPV+Gt3XLHq+fNnLww4ka\nprfr\r\n=NmXX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF4rcsd0FmRBTFFxJYvN8cygeSzAfwJwUvbhGILviAkwIgQ5YULBNVk2k1kVdOluHy26lzm1D82UaAZ74l1klu0PU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.178c25b4.0_1604008244153_0.721929846021452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.124beb49.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-ripple":"0.20.0-canary.124beb49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bUGGoeXBnonf8gNLhGtff1pDvC9oYRXsqqEY6wRWnShDAUp5MEcVy69U9uUG5wxojLADMJds2Fm11GvJVf5Sog==","shasum":"e20cc06507e0cd4b3380e1bdb9662c211d9da77e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.124beb49.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqRCRA9TVsSAnZWagAAZH8QAIpABuhgWZRH7laKzybN\neq3/cBz+cL2d9MtCJ71mnl2EK7XvSCUMvHt6ZFMV2hXFp2LAe9EzmOSzs8s4\ncFfypEL912lWRHlWsbwmbz9zFznV24EPXvcYKCYl4dyXDDxzpdK/rxcsDNvT\niOZ941eYHlxphO4BrWizugY8mUEcJ58HTSVU5fD/FHxWmAzOQE1xniGQvM47\nQpwTA+xiUN5ktbYq2ZQFd9FzcwIvUoEm4DAIIScqx8mw/IZAIxL7Z65T9P1a\nvWSZkJE3hAQyKyfWWFOqP7b7dBjIR8N+hWiZc+7NexWDJ9GeC4fwivxZl3ug\naPADuKt4NwYW7D9stVvVWsdD/vOvo7y8PRpaPrTEbCWDOflVNKHqoS3hFsGb\nIXyhrlByMr/TmOVFMd3QJAVD+cDRJCP4mtCOxXK7VxfaisnS93SYlsTl2Akh\nTb2fsyok4a12nOe8kph/YAqJFDjJYPgrs5ZLmmMF/neEmPa0RCUPR35QZzaw\n4z1dC+Cq/r97H7PDWHpSRhkRQo579RCCLszhyR0Ke04trfa7s0hPZdE2M/Dy\nkt6vEd8HcnXmQPbfi7R35pr7XbnVPjiLkQtlVkJr0G1OlWpCOfIdEkL3IXI+\nXNSw9GB0HGKby0rYpSyh6TFf30rc+7SpdSqj7eqCs3EtdKxbeJZMtHCgrehZ\nn5/j\r\n=HbEh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0K/rMtKdaI7ez8XEgvAFimZDikXqPUkDw3LifvvMaHwIhAKjwvF/9Z2meNYQt+6gCojnga8tA/BQ6R6ZzO5GMPByM"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.124beb49.0_1604102800595_0.3326931651393519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.5937f468.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-ripple":"0.20.0-canary.5937f468.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-75UbPjB/hyOhaDgs6g2CIirj5TOjsYvIKTNEf504kEtvV3iVBSUUp+1Q2i90vcwOJXrr3FMXtAguuQ5pqUARow==","shasum":"b2729c57607c6fdda40940158c5ecc77427a0295","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.5937f468.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxesCRA9TVsSAnZWagAA/dMQAJDXGJaZyEx0fuf/G1E0\nZskv5r5qiEAlEZviiu+TMyVLDJLggEMIVafXnGHQabH9v2831sdvwwa2VsJj\nY6laih0v0ROdLOk9GVB/QCy8uqs0q8pc5v1C12NBRnJnqcwSHt8ibMU7yHjp\nKZmkcEVp8XX1zkBVpPhRFgYSPbNFtjk47X27ocXMcBJiXvJrFuF1iyUkD8XD\n39tEW1X9SA4TkvZlvqqlIx5KHbJAjtRKc1wGyScdzvmsnDxZuoXgeHNXPWOW\nCZ+V4Kw2Kt8MkJ/V+0oQqIl9DA6sOdTDEbKvNfsdnDnfFtoiMP0gxswz4CNn\nTcThyv9fsJaTUkNc0SyNJR8GEf4nMVANWMG1oh4QRQ5Q85DnLZvwf+NcYjE/\nbgKvHy17msDx8SIuVN3r6HiQ9OMJlCeYImShCuqZx1l/l0PCiVSfzArPmk5C\nhENBV+SJmybQoHYGzy0zO30hXMMxP/U0vVRgBakBzMDAvDlgNLfyX5AV0doB\nJgMOCLzK6ZLw4aMF6Uup4OTjeM2M+fCmEBP28qe46Z/W7vnzO88hUG2Z4aZ/\nYagG9rVssY2MeVLxMLq1TFpe0eNDkyKLNy+gL0nYOyh4IdUkamo0iwmxTovp\n1RmH8kmH/c07CzIIXIAnqIm5wcj3n+eucwj322haKRZcZRBRUmLuiTK3k8tA\nVURT\r\n=p59T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOQ2H8A9sS/5VD2Yp4j+nXuUIihUeKIPUP5xh8aLB62AIhAJiP0z95ayW1GL00pPMpuJsbK0HlFkIhQEZwiTwaW/ta"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.5937f468.0_1604523948157_0.8711132133889505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.a9bafaee.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-ripple":"0.20.0-canary.a9bafaee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lyRihzMbTCdSJgex+2RuOIggnR1L8XvukU3fk8uKB9aGYp3qUJ2VTSbpTBUce+0PGW75I0bc7al8vCrlhiEoBA==","shasum":"b5e9e3832b4bec3a12ab82c982cebcfa76fe5fab","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.a9bafaee.0.tgz","fileCount":15,"unpackedSize":81470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0eCRA9TVsSAnZWagAAl6kP/1CpzhgibX9qsuEQUSaM\nUwZ82EFs+qSIVEIpbLlhhZ61O4w8Gub2DeYOryJI1q0klGBlGSOe7TW0BWGw\nqD1lAZZvokHNHaOKonmCmQW+kt6L3b9m5zE5p4rAli1btlQdboQ03A43EwmN\nMrwNaMriSwv8rKSO8QXVCYsZNniqAC8OlkagOeas2jJeifhm3q4DXdAMv6+f\nzLX3TnZ1WlIpYvcouh5K0KVA1GT4Y0NI9GMNjNjCNlywQLNTIQmGl0UvOi90\n7AEgvj8TRsZhp2rw5xo3EV3vQG5+8Tg3hpxQ8ML7tviMDi0dw4glQcBtXcQu\nLrqMe0Rn5P96s5BKJWtAn13BDkNluLuC8hCW/awd81bt4T6q35lt7ua5uH7W\n8afhCG0HULaA27gbtq1kNX98CuQurGF3W4FewLZPr0QhW4MXbfRVMtWH/He2\nhqNcPCzlDXUZJND1aV6g6EwOT9yoKhjpcCfJeC4RvS7v1FFYPQmfuhTiw4qS\n/Ny9F8w+uCZ1VZ6s2fC37wHpFq2JsGh9RpO/ijDrjiARhGXFjVAYRNbjFOeA\nZc+lZZJbONDnfrcZE3Md5AP6QM5jVBOl5yiEFJm/dXc2Y8GQ5w8V8baqqpoo\nWXf9AIKc2Rg3SkGcksn0P6rvBohnt01y51Irfovi5r5pL2jnCk/OSNR0Xnqq\n0F4A\r\n=hWET\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWghLgGsqUtvi1/HTv+ID5DtAQKnAhVAHrpPOl42IEbQIhAOVaJNXftbqvnRFbz+9C2SmS+iuFxgL19en5jP0HKw3I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.a9bafaee.0_1604615453820_0.15602694545721585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.184861ee.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-ripple":"0.20.0-canary.184861ee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ncYqSG73e31p/CsKdMdgHzxFEPhnTPNqH7+91yqUSqOfAfmm1A7tChXCZ8k0R/49Z9QuQi6KEebCDXtVGOE06Q==","shasum":"c77a3e55ba9bc9426edf7155d874ab97f0f42c08","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.184861ee.0.tgz","fileCount":15,"unpackedSize":83130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexcCRA9TVsSAnZWagAAY3gP+QBRET0GnyVxp6H/CAro\n7ZPJotqB0AXZ8xr8cXY+q505VOS/nMJIkqzSi98s3UEbszNsslNochnsyoSH\nxnGph2Mgsl1jZvVOrLyt7R8Qebg1iWZDIwtWzUBvhkYrbbgnJBW3+5CSlpfT\nUSXP2zn0N+jsfr7lgPg0LOywYmiZqYvOpEBUkbfnHGwKO1D3m59l/9TCNgM4\nObdhzRvnh4sqbjY1PP1L0VHQ7HLqfGqfhZfzzBTM/B6aC8gs5PVXMy5AwBD1\nJiCdMeFr/snEzZ1ttuWGyy0k+u2XGEGGpFWI19cq3nnwu3RbQwWj6h0H6i2b\nL0cJK+mL+WRxfIdtIXg2IAsJIKY4aeQAwjThxH8uKeNbWJ7QCjL0nYT8AfpV\n9vvyUkUtVizk7QoBXyqHXnXHCfh7+u6L7GRRZ7oaj3gCvDamLK+u4P+RGxQA\nrIWJDzo0KHC5hBPU/mz++3vVoQuNQpoKV/Ufijd17mVOB7wB2ekxtDFczOUJ\nOjUJzdyiMBTtnb0Qdrd3FsuwwE0b8N9z516Tv8pLhhXXB7jQfFQhp/FZ/Lkf\nxUvmmfrYAls9e/ax0MBaDDZFtAwqm2JN3XwPTWa8vxPaYeEhRix5EIv0CQVm\nA0OOMf4fZJmQY+LTmpofU6Te0uwZkaY7pQkO1Ilg0aTru6ind/3IfwA49u0d\nCPQU\r\n=1+tg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZLzwxnrG6xfKW6pAop/jcRioUiXfAGYJVSkJhVNFwBwIgcRz3UuOUsnhgsNFr5qcxG4H+++4tec7tOMYSIKV1rEQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.184861ee.0_1604709468155_0.8523217343920506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-ripple":"0.20.0-canary.6c6ae2d6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mMLQIxQCkx7nLI/xVRsAUN2zcDitWartcV1UbKhsCbBRDwOwb+b1RsdCBsIqi5KP2FugBG1uDSmiCvhZJk4gtg==","shasum":"d47fb8fe038d6d8e85ceb1d81c83f11d4f51c1f3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":15,"unpackedSize":83130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT64CRA9TVsSAnZWagAAV78P/0vVo4MAAX18smBrGleB\n5GpZe923x574sl/lFY9CNbAdvCj0FoZ5zaCgtfuQ+CdRFS61Lz9rmQ8KFD8W\nM02dyfCOyxMPkixoRHMOUXXA6h0Bve7/OvR9DA1EEh4FVtruXR7zxDMpmuEm\nX0tZDpvNVaSM4iX3c7X852dDJqqdhqAaS1k6Kp0WqgVaSG8uDOXuwHFMyHdK\nkVbnEPWB++ZSp9OY9uJ233fWE+3tVunz7FKDVw+nxcfoveiMKICQhbwFM+gX\nDluWtss5uzJkg0u0lqAGO9kOqYeOJd+SuW0ZnsbCQpWgbz8p8fBGL72d8xmY\nwV9AwrgfSSerEy3/g6bk0FItM6lyg+UopfRbLTW6bZbLM77Vn86ocgIvumQS\nqTYIFObVXBsOhdQD+vOAgewB4hTTYABoFQ6Vbr2TWveINngjYcxrIXAPagWI\nIrrYFbpg8AVkJMWnWjQii68vSP7jImUOIfclhqcfn8HSKIXvj59SX874vKTJ\nwP3ctKQSFr3sHN3I1g43qMfWcOUn0WOO8dbV2uaUrv6R6C25t8fRMOUgoXF+\nehLNThBPdrcWG769ZvXrWEPUE/Avz0oyW/s3wDUx2foDYu4l3cS3WO2fx+ey\ncLTh5hYiHxasTECLs/9GR4CdxehGCPdbGgq0vMwKGCEIR73N72eqI8G2cS1D\nDUuS\r\n=hTVt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAd1nZIVJ8LAwOJUd/CskZ5SD9gYVmQvJ5LrROCTwv4wIhAInG0MhqYWpQmWzk26vgBk4BefzhMg0rhlT+Z5AtFbD5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.6c6ae2d6.0_1604927159991_0.9473815161892243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.ea2aa477.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-ripple":"0.20.0-canary.ea2aa477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JnGMOuKjBtIsUlu8KgPRi1EinhRu5n47HERPKfLD/sHXDVgYimGuad0M9eMnJtzsdqF+dPQQqjnKxRNKdPWcxw==","shasum":"ff0bc909ce154f27fd34400b577572bbbb737318","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.ea2aa477.0.tgz","fileCount":15,"unpackedSize":83130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeJCRA9TVsSAnZWagAAeegP/i7nZl1YLs10z8a+/nJm\nN6D9TnQRYmiue3+S2/2cT5OIZzp047Nj2MWoGJsmewSCZ8euujIs+G32E2Pu\nl06sEOhgookZHj6QGMmDoMirkrR60HifUCE5kI+b7J2Y28JMVTTEl1aP6CGe\nch3q+Kf2XnXysKR6UbSXYhqPat6kiZ9LAKcvFuIJi17z+A7Cg2Is3FcB6+jE\nKzildPA7yjY1OAckijO5JoLFq4XQk4sIi5y5cDra/7Q0KLt28vvXwI95PCR2\nMfnDzyUQi7v5R97NbkUwnIQv0kX4oASAf32Es5ofcnndy6Lhx30hDYcbkLvF\nt5oCO1cCXK5xvGonT14CGVibPVygxI4gFp+lvMTMJcFS6uVToIYfTS4grM9K\n/KgYjuF4YHIM0FIWDgTmsNwBBv5Wu0Wib9aqmp66ZwRZEPz6pT8gWBA6qis9\nF3mFezi3HUIOwDNDBQ/3xIU8QsOhNK+dpOOiJs1fi6ldFvOif+EaekQOaBsL\nODp7EFbVqE2Bxufeop6gy2PmO97o6RZYpDZ4/ZHSsfN5Fh07FnVZuqtd6CGm\nb5d6VH1NrOjJ6ztAUcBs6PrQikeQPPqbS+LJLSIhGXaruAUTtqG/cvOzya/2\nI84YnRmLxyfsSQ+qAw0ZWAEzBpgCQaNuXEYceGgUMla8luJWMpjbObXgaLPY\n60gM\r\n=ct3B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/982gQA6yzmGYP5sbv6S0FTk4OV0ykvSzZKhuu3ET2gIgP9vD8KYxLjIKzbyNZzKUJOnXJsjkp/cXT3SqyL1iOCg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.ea2aa477.0_1604966281010_0.2874877309818229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.a2c088dc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-ripple":"0.20.0-canary.a2c088dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oJwaE84Leb9a86wt59wl8OcbhB9zWeQUWbsFq3r+NtuFOq8UpLY01q3QD45q/IZs0cTiPWDBTjvb+fXVyB6RdA==","shasum":"a8760ef490c5d5d8d48fecbe6847346b52e055bc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.a2c088dc.0.tgz","fileCount":15,"unpackedSize":83130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKLCRA9TVsSAnZWagAA4gcP/2orV+fpoCz64fPUNdVA\nq3aX7pinnSPpWyShOKfrVCvxBR+DhgrUeRhQbpOK3muq0PLvX2kuIVlulhqN\nhOL5i8A7dcA+upPbygG+CvFAvNQD4VGWDCOwQ3aCEYeef8Q2i5T6xgBKG7TS\nGWoOasjF/V3KT1mQMgfnpsw923o8CK1YeAuPVIsCgpSLea8I+ah60JA+gBWa\nFwRpFrEWWKh82iivZsA6XfO9xWt1g4hxCBKwL36A14UWqVF6M/CLWx6nD/K5\n7CCQhS0NDOiYmB4u9/wIAKNJ6hKiSd77iGOSOdh16jWNYY1LBbCJocPljRgV\nPDad+SBDuNExHqr2HWtuKN+bc+MGVLxtamS2CUOGomQ2Fcr/dS/ZjXgJ68Gy\nJMM9262lkKECbkKs8hLX/CddUTSP/wwJUn8fLt+ZE8Tmy4/MsfXfjzkz1gWd\n85L5I4YVqmC1TVa3GmSeSb0WpbXll/tJUuytJsPNBfN+4VHyZhIGox+QC1LG\nJnWYmbFFIwefjH+0SaWbtadxadxkCumzLts6z1ZID84+qSZtypsvXgcrkuW2\nctcNUgvevl8QBAjxAtAhWlWTI0PAkcS0MOkSg9kYVeSRqIQDWwhd/8MBdvS4\ncC7JNvSabD4+cF064pz9ciq+klOfKnwWgF574FzMJwrB9v68eszSwcbQKVQ4\nc8S9\r\n=PsiN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSFPEzXWs3HPvRY99F/UmsaPnjZryVAmDODd7nNwLrggIhAJv7e4Zw20wZEHGlGABRW0jbKIPzqsG13p2Ih0OSCu/t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.a2c088dc.0_1605018251229_0.28090001212510085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.b04d71d4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-ripple":"0.20.0-canary.b04d71d4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1Hyhsr3EJqd5qv0W2vG2Alpxm3X4T5Sb/Pn7HV345SAOLlQwzGyTczWTvtxdlrW2g+fFyLSgaJuRrA13J51ZAg==","shasum":"abd707364aa314d9633e9c9a29292843388d163f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.b04d71d4.0.tgz","fileCount":15,"unpackedSize":83130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRF/CRA9TVsSAnZWagAACZwP/3tIv+7LoVEdoZHEsVli\n6ihsL2GscP2H1yBWnkdXAX/Rqrk5B027aNh3b1/rY3hPJEPLHn9oM3AeYbjZ\nphcuX4HIxobiLPTiAwny/8+hwbzL0g869R+iYzaXak/mZe5znLHf24kFNTTz\n3sFZyS//ylMRcS+4j5Il0o21hVCH1JtcytxBoEq5tL08kkjP3crMsnbnCcIw\nS3kM/yPttl7lhc9p1FtcE9vLTF0hrt9MaiDcm2p+2XbI7xfj230pC+d28H1Y\n6QobKk9n0FqPyYDQKg1qnCfb85D0xxuOLlxGdAFbX9L22FznCwmLaoASx1dZ\nr0hOTvVUwX8SSeT8QGqujh3YcVtGVNk4hQuLmRXPVQ0kHjy9+LiBmzhwlYES\n/cPlcEHddCj2m+Rh8spi8hz4EO1N5qxLyoB5DqZONzMJn6lDptrJIwU1UMMR\n3jpsJaSYW4KuUgdOULu4q7HT39ghbstfDk7qRkUtl/X/UTY+4daCG+xp2RN2\nUtUx3yqWLeBm2bPE5prX8B3xXm1gOCgmIJOOigK459Xi9Rh1aGr1LeCiQICE\nxHt07cHlckVGQ002x/0hS5axM037QJayeKZK0wb21nZ0GvVKNis3zkPi295O\ndqBBSBr5FXvqyy2XkaRNRV0PO7ZdLvuiXU6qhEJd4JzZyimSxEU1oXghJkPX\nr9ZG\r\n=rYCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDikl5uXk/CcoFwMrN0u37NT7SHbphmIAD6mLpfg1nzdQIhAK5WbjfwhuUZ4sKqZ8QCN5OQRaqS8j9xYjVsbPcFezhP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.b04d71d4.0_1605177727220_0.0829906941928722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.2c553352.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-ripple":"0.20.0-canary.2c553352.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tCwbf9lhvrq5vHZ36EtkpJ1shh1v9pe58iyneBmd9Mm6ohlMt1Hp7MyG9+XCbMmTIZ4PfAkNMC3MGtGORx2muw==","shasum":"dca77cdb91ad13ba2557649202557cacfcb5a4c3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.2c553352.0.tgz","fileCount":15,"unpackedSize":83129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbppCRA9TVsSAnZWagAAa4YP/RJe1wHNGSKfdcuepb5P\nqO8RCRQnDXyz4KfR1FyD7+RP4lds7axVlSZMGXcUfgTtkBVTrkm9CQGqdrDG\nroJ5xx9cj+t5aT+cjlSoQ2kiwGnI0ZYD1jzYDCWbhPE6OJyoVOMybvizpO3+\nudl3X79XhLuA+ccAif+TT1RY2XMF7oi6vsiQnV1zxs1h+dXMh9ys/orr7Vkg\nofh3haSB0xvnSmlxu75i0vX8FJVqGyhsCmHPqeyEuWIG0Go9LlycJUgzZ9k5\niuD0McbJGDEO8qnUZPx6jq36rDFKa+y50I3b2QOF5ogapNGe/NxYt4/4bMPV\nn23w3Sj3qVKKup65IRLZ9oDBTpNJti8R6tHY/fnrug50ZfM+w/s0fw0vitw2\nef6+dob7w7uSZIy3o1jmniQjI0UJ/a6fMlOI4aL8agVVLzoFCtx+A15NqqTb\nuVFka9/PDbHnRy/XWdITJXlIgLrFLgCEqGjsUN7g/qCqzCxCp2mc7lILmQiS\nFYto61XdAZ4jyn4QYhdJ7xQLGr/DMniMFs6zDBKj27fUKE/UxHM1jsb5SXx/\n9Vfp9pKjPM4gM0HMuqJP5c5dOvjXzYU3RHRKjuouEF33M3jxVkZ5xNm+oTzu\nis0DTcJUoP+HysLipwTiOf338rpgWltw22uUA2MSl8utJ9AaeN5HdNppilOQ\nIvJZ\r\n=TUmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMOxsq+MgdvwF+EcqJyHgRIZzyEK+UEe5fCbeAmjAHmwIgKwSqQpLSw1ne4gjSbXuekmj+TxxScdsqQiSB14JUZ4k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.2c553352.0_1605220969382_0.6330867467763852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.6560d19a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-ripple":"0.20.0-canary.6560d19a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FVLj/QxoKy3hVhB+Qvf+/7HIIRrfoZf1GGNPpAMT/GMfeUzLrqyn32yWtA4ofFaSPpXH6tQrjNpfjSmpoWkNIA==","shasum":"3bf53f4614e215f820f8a31ccff74ccfd75f1827","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.6560d19a.0.tgz","fileCount":15,"unpackedSize":83129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEgCRA9TVsSAnZWagAAYqcP/A+5yL6rNIFnOPFKr4lr\nPKGDniFfh4h+tPXUJ0lwj4FoZSv1jD9eCPv2lBbOyWMWWJ1aln1A6QBiRef4\nPiG1cYh8IsDv7p4AGnl2/FcCC7qtcktYVi6ibcvxK+VsztaPN6yBp6uJNHZt\nwKwYm+cmre2TxJ+n+Yj3ngZ+E8o0VwlJQzmoNwRWZ5mvQDnzj/WAW/hBhV/7\n7ZcqdpkxYBbZgLlGJflCKpYQtHrOCbeMLFHEbja/ndeJFCe37fulr2WzdVeg\na4rnVytsNvhnofH+FaQRHUV1olkH3dHHcVN2GMBy7ub1fqAj72zWSWeAgzmD\nP8cot26/NjMPtcE0SqDdmH9aZvD06dYwL+GlDakuMNylYspPY6wp9kE9bX0r\nGDCjGJna7dC6XlMUa9qahDX3E3X/H0dgsn2oOcheMQvBE0sLOYBjb9RI3LVP\njnE71BF9WDWeVMfG/C5zxBJNiF2q21eFWGVig+WGYtY7uRmFFcxWxItAu6lt\n9e8k2hbfVsCwRnIGNsvO5YHsrsxE/BELkx7Y7jQYu3qBj86jWLiZcZR5t/e0\nT1NyL6Pl6JVaZ/s+HC/dO33yhXFlLGJRsQE4eqcZvOKu5k+1f6i6lOXzvPZm\n7qBcZW8SDEWb25HuqwEU6Oq0HdJhNqEhPyEl8DoBVM7qJFLcREhuHxZJZpVs\nn/f+\r\n=CKuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7QA8lmSfHiFvV4bDAjwSVD6a2m4y2mMY5cvlLk750agIhAKLviX2lOu8iKUHLhVRR4M4MFaR0B7Z6Yr3pzBeV7U5G"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.6560d19a.0_1605300512312_0.07818829103462299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-ripple":"0.20.0-canary.a28d5ec3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/raxNiY7g1OHG3BHBm7Ssy6W6MekEwG3uo1DQfbrSLfPZHZbOceijfi0dx+MUqzcbC3RD+po+mdplNKzzF4OFg==","shasum":"6332df147cbb01232e8b5009f22dea88c894565b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.a28d5ec3.0.tgz","fileCount":15,"unpackedSize":83452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+sWCRA9TVsSAnZWagAA9DsP/A8Y7J1CODvwokI2eDX1\nIFx6snP0brh6zGinP8UXby5njiqaL14zMi5j01qO7qFMzqqEkxhaduPtvrsW\n26y8WerUqegI+s0v65rps/w5GEZ/XgQdsASOGpM9WIbmzw0P6PTyAG5jXFLh\nEyYo4FmTAqtLbqfhoev7NsHESNXtSSaT/P008lxXLHfNuuVI82bZmszIhnRt\ne/Ev9StpcBkWl2CmIZReUyZHEuZZGUyuwuZO9l8ZY1ZQFzQ+GLw2nHNlfSLh\nt2EpLWif59YVtoHH5rtFPM8w+2tbliZ2TuCZV/jjuxqpUjwygGVQRXkgSAAY\nwzeve7wm4XDlni2FafDkTsJ+4BYQoqnNvhUqHP7MJpNn6v/mxSmAwl186jqf\n7Y+ZIXdb2wo5vtjEJD73CG+rAsKMdk/fV3EDuXN55nuYVr1aOAwUA6lIx34y\n+hSWF9O6iO3adIQIvbo0NxWj0qsqL38L1Sfkvz2/s+Ix2tWoJWAqc2iryg2F\n4KFlSzSaWVx1DMxzdAl6kM1RTUCbufOapP34zUlyPg0VryyImGNiOmOBYZu/\nL9Qyb/E1ej5oW7+enVT5S12vdCI3bVbbIDvhtGMBtKP/+CwcjJh94Lh5+1XF\nAboO7IVHQFpWm2TJDLOdUvswqFYpIfgoUZdAO7hAQoX+JwXI2G5yeZnWcJUF\nqoUe\r\n=Jz9q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDrglz9ku3ZrEtRiiC+Oxmjh8SuK1SEzuR4Q07KiwnmAiBXFTqOMfjb2Pq0sHDAxWj4/Me/ydI582Xzq+UQ3Pen3A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.a28d5ec3.0_1605626646530_0.10219923254025298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.03e7e778.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-ripple":"0.20.0-canary.03e7e778.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MBFagJur2/io4C9zW/OMe9eLnTshhiajlv3C38oWYp/q6Gl1bOwF85UatAKniL0is3OTMD5xN0svq1wWAUq+uA==","shasum":"338a4fe56d4ab66e41ed4132ad75194cccc27ddb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.03e7e778.0.tgz","fileCount":15,"unpackedSize":83452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPYCRA9TVsSAnZWagAAW6cP/1209VVT+ctnJQ631XG0\nrslAwQG61MvbsCDrpnmo3EY1jP2ewj0xhVhHZqhix3GbuAE+z1lrW9KuO4aQ\nBK30RmA0SgushzD681ixPUWk7tGIzn8UQxdQyWln+1vWwaQ9S5PQLEhevWwA\n2JEhAGFdXPvKe5q1Wi49SjJfubNtsmZxe+Dw4w+h4E0XWCqQC88zWjJ2Kf9Y\nby/nTpq6Qd95Fh3LnfU8G4ehrEQPkOAC4b3XkOWB35TV7wacEFtBG+WzzdPw\nS6LHk/NypkQeokOF60Xa0QX652V8bfkFj+4piJ4D0IyObA6EE3BlJB4B2ULj\nUmWGzXxuysWzaZtIyLbEFcFYOcqrsJf+b0yysKRP6c2stMTOkf2P9uWrNW78\n3tmGfnRTGaNn2kMv7b3PG/t4F/SbGuXxqwEd4kgwibq8D51txYi/jXsLDsUS\n1EfivpIa14emxBZazwFW0Ak5iLn3x//tbcf8HcO+xhcZN0aE7qtVrubCBRxw\nEmqwdTuhj7Wic143cMGlVk5f6BzU5dmCAexonxMuWdyZnBwpVj4mSPVuWAlx\ncP9W8o6RCwBC1/YX1fdvqxsXXCMqxib46Gc74j1lGPUHwJ9peAGuI1zyKLUe\nUbgz5xy9ewmgAWdvyzHzDEOLbr5G1OhaGyaoSOzducPRnhNYDyc2RHJYw5TS\naAix\r\n=lsKX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE5M6vCsdhldk0UxaP6s+05mGxYj8oaGS17MBVPrU8VEAiEAmIWYcBx1BVuRhb+TSeehoh2XQfIe/AJ6+aT32QPMSVU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.03e7e778.0_1605641175259_0.8607634623373395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.ac8ed597.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-ripple":"0.20.0-canary.ac8ed597.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Aon0waoylhe1A5cFsfKwMfggKO46/rviqBEQ2ixCYNLVWX1DKz0R3FH/AZFxeUEbWhLQcixbGEDWYrTurHs5Zw==","shasum":"9b8c00cd189d8a4caf6d18447898841d9fbab5f1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.ac8ed597.0.tgz","fileCount":15,"unpackedSize":83452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqpCRA9TVsSAnZWagAAu2IP/0npP/2QwFwYM24c5Icd\ngl6XnkyLtvakgMznErlYjGvpIYivzPIyHkk4utT2WqWqve1TNxteo3MNZTr4\nt6eRwx0Pfmjo2Tv5t1uG2IZ4phO7M1NI/b+OXRxyU+Ix+dapiZ+xpV9WOQt4\nrQuxBFPVZTChgZvJdEh2g+2vQB6v9mwZGtjFndbAEZRVGLUiPy5AZNIf4L7C\nquNDix5SsXCKfo7dIkdN7YbiY1HSTYYqQ5411nm38P38/7ffmjU5pwK+h9Rt\n8ye4LA+MBJkgebR04qcEgAkU6TNQ/nuef1qwY2/6RjZuTqewd8+hxay/x7Cv\n8A8Y/VIn2RRzE+mTsbQCJao3YeW2a6hPRwFmh6nQRTHYQHTcNzTvm3WtqFW4\nRvbqSLEYCiJ2IGLl/fKjyPGNGQUIyrr0W0JUs01XpCu+bCJl3621wKW825/N\nf92aokBOkQI3S8ErTOBhP95FA/szrR0D+yAOfebYuTxkoE8/aX02F5ojqHVb\n0xV1KRTWB/5m+ZkKIk7TSx5txrFVpR+fzKis6q8hbbwuOa7uF04fKjwGbJoo\n1zAw0zantMZjyujgx6xbRbWxMPMdZgDhbBVwYIz3JuF3h5E9P5EPvVPtMqkd\ni6mrw2HoZu1CG3EcYyA5kRgmiIOCIGV9yzCkv1SvK6d7PgRJ+bW4/zO3qd0G\nSJnb\r\n=5H4U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAP2Itp9o0oRT+mA55s1DLUvdQ4kWb1b9IJqfuDCTsZ4AiEAgOoVcguL1W1L6roo6yapdgPgfdsUqLqL++tG9Y3t8ao="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.ac8ed597.0_1605651113367_0.40517046076572427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.b6a60f60.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-ripple":"0.20.0-canary.b6a60f60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-joMZmx8MTcPLXIoBb2xZJB8/XUxp41XUtbsRTpNBbHMDNpsuphU9+aE4schG49+wzk/PwM1T/NrUaJmDO3mCaw==","shasum":"4d691f968886378f4f91ebe73cdc22073d61473e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.b6a60f60.0.tgz","fileCount":15,"unpackedSize":83452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQeCRA9TVsSAnZWagAApcgP/ijKiW01s4LLLb13lpqc\nUCD9P6S/7JUu0qHlQI9IgIZ8a94VnJWFZu3BVLdrmRKwcRy1f0n6TcMH4gAL\nLuYFhj3L0/f8PwSWSVeosCl/KbdbsOngk448QaoUPRWZJONnKzoijEvxSUoX\nsplEuYB0QqoNSMCzn7JK3dD4ZBCS/kFZTroSChi63U48cVKf0twQqWaVYf3X\nG4vCT9Ylxknf6SWsowTHjuvx4S10b8D5xdv+ah2MPwk8iAaID2rH35Lue3md\nVdJWdTxr9ux19y4zVAKYJ+S96YQrGOO8GTmyXKmEp+WADeR2Yv3tYkSTN9Oz\nvHHHF/ADK9WV7UROS+mmF/9wXT0GRIPIRaMeBUHTHaB6pPAjJMF8iv7vyM5J\nhx4M/vZyFxJksND6nTr90GfjlVH2wzpkytS8scJDmdIPWwEuoHUNyl4uaZ0b\nk9H2teHfCYGIETucV6T/uN6+liQ1HtxW5FkNfU60fH4yComl1kXiG0J7fFWt\nhPZqE2j9jl4u9vXvIxTKwDHbiHv5s9atb4rhhtLdELVDA5HViI7CDcY3G4cP\nISIL2OUZf6OIqkqzqHjoPklW5RearoABvsYJnzdthw188+k5031JjkqwfEpP\nPR2DD9tQN/k3K0m4T5xtjDcf1fy8FDoLExBNh1I/zzD54C7hN39FQ7Fz8ILt\nhji2\r\n=VfW7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgvnQeot8VcZPhusHh7PGOMt2n9V02FlS6BDhHs2N+BAiEAxn12Nhzvyd5WUtVgl6jMtFJvGL1SjGUzu8KDc8Thegs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.b6a60f60.0_1605653533766_0.83245729668596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.71cc24fb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-ripple":"0.20.0-canary.71cc24fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-e5mJjTmEEBnR8ceFJTfiLxWR54vxBAt33GXsxsld+M0TkcAMfOT9W2O1cHQdY1jV9dyx+26JiH5klbvEuBn/ZA==","shasum":"109183323df7804128996c49aa32c810cd7f040d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.71cc24fb.0.tgz","fileCount":15,"unpackedSize":83452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnfCRA9TVsSAnZWagAAr4wP/j8VCis56mmecqzy4PUp\nkgrhLol36UNzIcrKXq4OkJEy462M/Ad0iTXVVNRITS31vbtD4K4Wpqglkc0J\n/Zdz3w3Ue0rRU4ye5VXZUNetRegK108ieELlVgvVrz/+snQuz/7V1D2ivIfb\ntG7ENDFXfe+KHfNiWJEe58iOjBL9ri1WQJwQzj0Rv89+yrVI78ePGRdvJ1C1\nY470qt99pyZVzMaCRcwGvYinetbUEsi8KXfN4wxkh+XWL6kv8dUSOFmduKaN\nkQJ8ZroPYMF3Wz6mdS7y++qjBnF4Nuc6SIxnh0+hWurMazAyJwJFMDTb8YYi\ngOlQrcMJ4QY0/PW2fdEc39hIjhNS5TF02b9PCg/bVtc1fwi7gf05ntVLstdi\n3Ui6S2ry9nmilMN0r6+on2G17CbiIgh5iesze1VSeT09YbpDZcB3PHEDovJ7\nYoEFDD/YB49MSsBVwwhLOsiDJLHQ3lxyovz4CsIOFegyDbKAD/Vsjpd/h8dK\nMiKfBNAP0x4w2yqxgsjEG5I0eOEx9lJzIEcsYnCChpXTKJUFuXrJkkQXGUqa\ntA+iykWGcSGyTaJiVi1+UrZVldAzL7hOUVNB83pRU9JeDutEKU4/XNG4hmXs\nUYgs5s9ZRm04iXiNn0siyk6zucvngq8XEcVxAvJElp53Hm7D707GoNlRCjBR\nTVHQ\r\n=+VyO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPQqwEV6QgtxyfuRifVCHI6IZze6z+4S9XsJBWK62S1AiAqZiNQcfY1AE/jMNwUf4+kXjbhx0Z3nRp0YaqrTIaRtw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.71cc24fb.0_1605655007188_0.6510945385764402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.761027ff.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-ripple":"0.20.0-canary.761027ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pggV4eKhOfECwXLbS0PxrzMhkhTFdAxUdHUgyVmfzsHGIZv/FKzHEM8BTN5abNkYlRqcH5fV9mwfMwWh533DpQ==","shasum":"bfa7c8d505de4fab4a1134770acfe13519e6c139","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.761027ff.0.tgz","fileCount":15,"unpackedSize":83578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZy1CRA9TVsSAnZWagAAd9cP/jzN6oujUmQ2EkzDsbBY\nrwty0e8lOVNgYjokmkg8xFYpOSfHwL0+7++1OhnMKOYWDdKseHeeyXdTFWL2\nY1qIxU/ftp2GvTPwzaGRrUVRRLBzQG6dps4MB5/VMjxn6pVLaDzUn2jxXu0B\ng1WSEGgBZCyi1d/bd7dE62Ha+AMhV56ZJfXqC17Eq+YDY3yKAOWhEt1cpjXZ\nYL5kllrdol4LHk7psbgNcLONAlALR5cgQ0WYZrhdm/u6ItTme2PjA5RF6MSu\nS4+4zGH4IoaklI9dc0VnUhKfKLesrmf3eX/NcN4+yturYUVahHP3J6ocpqhA\nUn9x4NeBEZzHrtz597kB6HuU+oLTwUdeaXFG3qrJIXbbtJZ99M0zcE94XqKo\n6ucSArAL9h+6C6N7U1QJnhzB1th8S6b7qFdLa9frmIy8pWiO4B5yI2H7Y3N4\nmQ1S8Pzs4eapk3jDamjU/0o3vPhMMkKELlqadch+5xkijN3ihV7XjkEqoFND\nrVbwJgqvefr6ehQUN/C7j7xXkxlImVoPP4gJKqMK7zIKsf6If8JdQZZ4oNJD\necH+Mkvqy28/QbAeg2InTae0L8uErLIwHgt6Z47NbZRI7OlM6H1TrrrkKMPo\nffnnupNCkxmmU18Kjz5dtQCp0AbUa5jXvevacX0hTFeSrYya9iIfoZ6GJX9z\nTJPV\r\n=T4dW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5GzQRXPmfEZZ0L9pbbnpNblY5vL3jsJh/N/fsq/lKzwIgZmhuA49EcKc8gyrxXJa9z9dj4x6uywIX8/5JXk8j8y4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.761027ff.0_1605737653227_0.4238623875020171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.dc93d04c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-ripple":"0.20.0-canary.dc93d04c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-r7fZEOyUz9KAy0eVojLCHTFfDmw9XW+qOv7cInPHyoc9oGRc9mM9D1LUqoGm/JF5hfTC0ie2DNvqIVYc8BRVaw==","shasum":"b3ac5495552c299ca1b529aa4b697ffb1848ead4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.dc93d04c.0.tgz","fileCount":15,"unpackedSize":83578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4PCRA9TVsSAnZWagAALG8P/jmjk9a/7h/eGtaCpds3\nfHUuoIdli7ntRPVx7llj0ktkqd7c4+kp09kGsE3UbXIS7GfBVHVzlm21zja7\nKJBXjzO9F5gsmHYhxH2LgfjlsJRcTdFJ8U/tA4tlM1/aQT5jc9rztroEya3q\n3BJjASU39eKr/v3WwgnZoFsqX4MRHQuNmT6OlteEFK4JaLhIGY7JIHzCDZDX\np0eeJHm7V9VfJjcSxHHDut71Nk7QjrInsQ/EvYAouKSuf6JFyCeeckWmpzYv\ntGgUftVdSBav8GNKDMrDe30Cj3JYZplf+n+uXvTxMKsOuHz8VZK2hnN8Jo5i\n/rOvwU2g3+eQ+6b9Vwbm+wdqg/KNlobMf+Nzkc0q1k1RQUN9wf71iRFpoTHC\nNj+xujIGiGecueoXvv2jwpyJZVsaxHq5FouzeDadMnaZP+wpp3nqHc2XPzo8\naRIoIFsJPDynKUPYurnecpqK5GKJABczg+yUnz91r5tmHV2m6QezD9l7IM0C\nAYfDkAMPzpace6ylIC8EVXM3qhpHo2K9dso1fqgoKVm9QsadiX2tScC8NPBa\npphgR4KbgejQDoJxGr6NHCvZ6fRvC2xdbj+v2hXTsIAu11awGTeLB19nU7dI\nPd+lTo+ZwYMQZYge+FFNyrFRXBTxfFKEguLoumrJIt0DrhMN5NaZwuu6Cy9Z\nv2IK\r\n=Xubg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxWMhgK2CRmqtUoFM1StDNSyjUA3zFqEQ5oN/TknWHGAiEA0deGRNQ68siTnbtPy/kIjgAd4/4Da6K+iCKhPVDwd+s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.dc93d04c.0_1605737998609_0.47144961175581446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-ripple":"0.20.0-canary.4a5d4eeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-js2c5ixBOPaY479U7Uf68RMWnoYaotvrA6/Rcao8Q2AUmsKJbtS1wjhiDSGOSxV1KZVuEUJyuBMUMk+s9s5YaQ==","shasum":"4629eb29c55dc92031a68eed013cdc0948862330","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":15,"unpackedSize":83578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldiCRA9TVsSAnZWagAABRoP/jtAbNBO8Uxhn4qQi8b1\nQZ+Xxw7jow5MexPR6RCl8AO+ZKxHax0yNkLHKvJWd8W197XfvwZX9BgoZrtL\n01N4eIJClrJ69KvwCRfmeCZVs5Ao2t5Y86JL7lp2zCjJwC8L0VA2gBCRgkDG\nWExn4ONUc2qVIpaQLcuLviSyvd27WlO2SavMaL79BofyKkLbYwznDKl3WV5T\nxsuzWLNI5gbrJX6C8iMLw4iarC5PrKwrVwbOhO3hzqjC3BZeMu43IQ3ZIY2c\nY+Kd7ZkytPr3dsBmG/qS5RrKVPya+u8FjL7vwDyx56J03OwHoVe4OTMfsLVr\nHENeBTV12DJf6YM0NTXwN0oAK19RFrbkuuRE1M88PtvPpqc94v8OO9pYjvAg\nBsLFG5YU9G3QtG8GA3phMrSSbFcJlKIs6ZYypmH5w9UbyadgJ3NgSMq6o7Av\n4uYQzbnZWK4+nw/SD2Liu4qVvm8CFHsz5Ceh4vsSDmgNmjFw1g8jPDToxAJk\nZrqTeyMhWtg5yMpMKysE5wlDDdGbfrl7LUzvrVoOes2fLk9hZpb7W6InM1nO\nsEhuEDiT3S2BA3vWkPl9AdGupQF4woshCDRqa/tegVaoTvG2Gb5NM2NHpNsY\n81r0ZI2PKGvWHJwKECpk2pUuIA2/GzWmM+rZc+7f149Z2xRCIEQ0qh08Ts5X\nH5kT\r\n=3+ma\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYtdBpkEUojEjT02yjoBAx0bxRU/B32nJ9W8MZZfNwXAiBdXbcGGFxeiuu4iTQaCKBhkZm43pk+MOjOrmSizSwwTA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.4a5d4eeb.0_1605785441566_0.5158704569853614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.bd176a15.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-ripple":"0.20.0-canary.bd176a15.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BeH8mEUR63mDqj/0J1EC4yEZIUGlw8Q5aybB/knl9XLfG6mcf/go4KfdIAJcuXZdvha5iuntKIxOesLnyEwVsw==","shasum":"be1aad6af5365fd07fd167a46d38f22579a1c91b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.bd176a15.0.tgz","fileCount":15,"unpackedSize":83578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMeCRA9TVsSAnZWagAAVKUQAJ8zhcNdSkyoy0qkUywF\nkrxDuWWfZpS7mr51CQSR7mqXxdpvI9FGtCiWiSICzYqnwpIQW9htAKt/3Yf7\n4ylMuI/7j/X+tOi20Xb9sJNq2+u2rFgGiORF3HpbQb1zHR4NBQ8PfNi3JugG\nC77pUzspzeqC6FALX0XlFKHavZitWLHmTdpEYAPQG46vUNERnhyB6IOJVgrA\nemm4Yk2BCxlWTuywFZYvPGJllWQc2VR4kR3A4fjRXfys9ErhCBhAXGjj9W/D\n60jZ+dM9FJYxo1KL6Or87cBZ3UGxiCpFyu7qG+6F5eON1SCKzrk5hFhMSSf3\nV3WmkW3WssZ8P/jv807BCz1iQ95YEaJ9WRXdh97hSxvuJXGpDIOO1LYUCOah\nyfj3FPrgaAUWnsKUndWX9FYG3K5o1zSeU09vX9H6WTGL3vp+NMrI2EuBD3NU\nDnokEuovk9aTpEyZNQIYwnjleEkkF9E0EOnJK/0Jwb5LgqvSv7UfUc8Efqh9\nyJKRdj4cWqrQZs+Y3oFL+H2Jo4x1IDD3YjVIRIWtvbJlMpy71uCkMPF1YlW/\nYyB+nnEjVSyWywSfgdwQXzFxi8cNG9arnnrmW8uZiFm9VYRGddWfF/ppd2QU\nNwQnawUUheGubKe65zzXAyRK5BpTopR7/gAGbi+VThWSEd5CbFEk/JE6qoY/\n1LHm\r\n=NtLR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM0gbNya1W4V/r8Egi9JuHVa/xRVEN1M4dMf3X4j1m+wIgD61sBLhbf14Vhci8bS6XqsS3tq3hCccEAQjAX1v637s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.bd176a15.0_1605813022284_0.9799755249537183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.e85aa60d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-ripple":"0.20.0-canary.e85aa60d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EgHEPLwIcOLC6jeJ3L8D7y5gZyU5GAGlYRF+U6/klUFTO/e5N5WdHQ+SBIQP/DLxHwIjHsSpI1GcQLLCcvlavQ==","shasum":"f83420db7201c4c513992a2932aa97160ccc9bc2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.e85aa60d.0.tgz","fileCount":15,"unpackedSize":83513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDasCRA9TVsSAnZWagAAMF4P/jxPNqWSv+YXB78gYbmp\nObBSDXz2nHUQ58M9TZ16p42D5N6jG/Kt3nmHj3JFpMkLGKIAMAOeF690Hi3L\nzSAla4jz/KcEzVKSdh4rFMhDF1ndVl4A+233wINzp4t126L88A2FgpQr8qfK\nMJMXiQk3m4lKHO8LoHoRJHinEfEbJDAq3t/wDqNi5Vej2QZrudqlHggubyvs\n/ob3zJ/5XczeoFQC9nO9EBTFGervzQI+Eb5OoyrcJNnWdowPVSV4JxOfW+L4\ngEXV+lOeOZYu+DxZCcV2eAJJbTwtuachn2I2HQyEoWu1A/5cEeNzzq0tHrGr\niR8tE3Vk287qbcrk5F2+SBOeuCmHPw81ga9ghNnzFnBuG2CD9zjW14CF1fKf\nw6vCsQrgpAQjbGzlf8hDCeOqEG3SNh3//Gk/pSzbfbZi4KxR4J3Pg0Z0rr0c\nI4yiRRU7lGu9KDzkpaQebo791oawGImuvd8WZfiTueZbnwlZVqFUQHen9vzl\nMIPmSm5m+2X7qtzcoND+pKKP599SiPlMIm2j3agicoJ5vZf5hhxINnhkSuMa\naVb/hnDQGPTNY6Kpiod+BvSu/2gK+Fjx50juFFlX0aFVeQP8IFMBav5HMkmv\ncmDfJloxDwoPJ2zG2cUx08lSrOH3cngOlC28VRbbn3y+zIgdvx2q9ng8rXd8\nR9PR\r\n=pE1q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF73MEAVl64XFqWEVOtbVr86EQ/hKR58eXHZtuoRZJQvAiB42jXEsbRfEWrqUVDL4T9ewqTRBiaYYluv1+gIZuMtUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.e85aa60d.0_1606170284109_0.817518473564194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.72092360.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-ripple":"0.20.0-canary.72092360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BsN2AEOGXHmUH/S47q1A6moEnQ6veaU0WP9zRVXIjKe9qzAclFr576p0WuE65gjp8AbmTX14EPvA28wB02HQEQ==","shasum":"471b0978ef4e63f9b7d5afe962756e0f4f99cf27","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.72092360.0.tgz","fileCount":15,"unpackedSize":83513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImHCRA9TVsSAnZWagAA1jUP/1zPcefl9jILUrmhb7hF\nrSvt0XxoDsf8QLqbG1ZDkw/3fS/dCgaUuz44dk41REEjtHP8iOwlA8Lxzo2N\nkv6+xJAAYYbcbpEEZZ98pMK++j3874Gar3+q0yT7G3T2ZYk50zQPkVND9muA\nfKHfZlB90zuZiI8tTCc2dZ3PopIvjWs+XluN3Nq6CPauN6x9qS7RcaZu0MMr\ng9qlYsFFfEdF7FmJZtkxYEzTCyDkn7186EYqGk4KJp8VMcR3TNO+4MXIokMg\nThFhGh1k/3pNw8OgwKNy1aThYFb4Sus++f5RZRUqrriuS3sy0A8QUEuhqIjJ\nU5BYiy51Ox6O2UN2Tv79ADJihPICML3bgd2od+b9/P/O/huct2LTfEvpTDrf\nqogC88G3KO6ez3oJEj6Dkvubrw9HEidir0s7OIdlcVd0gxdJGmKlUt0orZwm\ne0mcIDyDFQFmqCPc3aEzFYdqBbDn8teQNyg1j+zx5W0HI1wWzub7zPdgoMZd\nV5fyu8nIK2CYzTJpvUydMkvQ8Y8VlzduVZD+T1K8VYTNRRw5501AyALKi/GQ\nFAgNfFazTgCOrtF/i0XBl7LmqFQGP2mGJSmbGYfJOojY6xdty0yPfdBDudnh\n3BoqGGjeFI0FsDQwAb/AOlLaylAFuk1gF8X0qiTGhIukX/RpyusngKedI8Zo\nmgLQ\r\n=z7Qh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqupnsoKXzmCSjJQw446GLCdrDR+pZNBiAUPQSb5SL/QIgPKyH5rxQ/x5ct2e0XyG5ed9MxvNAhco8T5aPJTzFq6M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.72092360.0_1606191495520_0.4383948009440608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.baf9d39f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-ripple":"0.20.0-canary.baf9d39f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-np2byS6QyNEEUOKpxkEUoWGBQ5PYc+apPSAZ+IKdFkdN9tI1bWbXAOtN/geM6Mw9uciOQpmZO6RjxRoLFgRRVA==","shasum":"d71c272520f52496e104c70a598cfc11d364999d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.baf9d39f.0.tgz","fileCount":15,"unpackedSize":83513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEjCRA9TVsSAnZWagAAeZoP/2NGy/LusMexyYQoZWNe\nDwciMumWR+aPA/4GD5LphM3eFwGNQakIgyTgmfnd7Gwxp5V8LMUwjlpWyaE5\ng7oEQmR1mxjn8hvxCXogBX9tf3/dhYxcyQdcLedcbnxlbLb6l7Njhheqpbe5\nfh9T9GFllo852p4K0Od01a2Roa/FEtwwe0Pv3kb6TxB6UwQUP63tqbZU65BA\ndiCyATg3X6YHl2tvsAkg+kRWAcQtQsfelO840FP5tx7VOOGbnf/cLLoVjQ+F\n3haqE12IaEa+86MMbcG4fM7rXkCPhhZPcdRWDzaVRLwOAhKuLlIEiB8pg33h\nbZKzlVw8fMn5nGyGkkjZq4P0T2as/QTVGPYo0p2VeuNOw4qn72KkjwplIdAS\nXMt7x05ZfflO0/62+to6+K4tBi74oUPM8DmG+RhDjtU7lpVlRyoHCCHR8zDz\noZrfMtyOQchdzDXgx3nUAXZ87rd3+iHIUHjzumsYPA0eMW+sMIBXmFtM695f\nvq3y9IvgAfF7rTQL0IfPQ5z2z28OrlH+o+KdU+zr4wNlXMsxCypLmhCWxQ66\nweH42+xx9/ACFcYLORAzDNGTwEuXa0283zMLb0He2YGkKMMhZi94Qy5wCcIx\nplJP1MGyFMQ4t4apmNL+6sN5kTwF/HLQ+/BPlGZaZOnXJJxL9F5lu4lr9YGU\nEP4F\r\n=BCpx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHj5hRK4mkBBNV/Xg9xi9t6I3j01mL9TTzA3sA/6xtmBAiEAng4qzXWcYzxh4BMzxmh2ieTt5VMuFbxGhElzU023f+I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.baf9d39f.0_1606340899488_0.504293335100138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.51aab0ad.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-ripple":"0.20.0-canary.51aab0ad.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-E7gFVF6ah6YzdRMZxZO+YYC5ogKPBjEMpRJ+BJpu163Dq8BsCgjL2ftoMstpqV88wua+mnoP/4YFb4vblOHsXg==","shasum":"16bbf6ebb0c5597700877ec6c0d089284f5669a9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.51aab0ad.0.tgz","fileCount":15,"unpackedSize":83510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbPCRA9TVsSAnZWagAAdbcP/2KzhRtzW6ztPo2vVL6g\nbAb1/G+V+gY/JuPiDGRZjGdLev80qK4B34Mpz3JSZuZvPboEoSQR9TtJfPj3\n7HSSOS2Gjq82ghYZzi23pvFZDBuZDBSmVIF3MKNxhxYHBjA3ZN0ljogi5WJi\n5S0JDwUkNHBdXvzTeKafxaVV0Z4PMTaOkAs4JgW/+8lY4JUr7wxqBqKhLR/d\nas/7GcImVaNZPHG/NYJDbbAP8hNz7mbslzW/PD2ND4deeHY55wGzAh3OJ2Qt\ntUCWq8xUeWu9G2/N0ffdS9gN189Er2fRLucUzZTMApZ4SH3errmIA3L8WoKQ\n15G1rI7Sg99ZdMrG+/xv77TSYWqT/CKIYjLS2GfaeSQz8J7kBAhMqe78dFj8\n1+1aDKofxOFdxp0XSVBnWofQX+wIcKOU0JnTySLZ/V3t6YaICkzmf7QQiaRe\nVR2QBvS+Z62Iv4nVw+mvmvy+9RwGRbaJgjg6GM6MiUXB1W53rZ/MUQitUGb4\nBDOryIQPrHxYjC7oHz5uCbGNrCnU6hLPiutKIa3rMS4OrtO9cQXpxb3qhVP0\nBVUoqHdMpPlsni4Y1cMoo37SeLp9tl1AmFQyAA6cJV0svl2i6eAT8QiqsTvW\n1PFwlTuuROnVdJfCNBY8yTE48wiEnoGF7Kwl5M1N90MaFDzoslVE1veyyqqR\n54a+\r\n=XsN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGaXUX8NAUvVlnk57RjHsPsJrlg50TWdQ/WAbCF4+FpAIhAIgBrvqfdFj6TnzJrL5S1qVhx4VqMTyNy1g3rnpVGx90"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.51aab0ad.0_1606784719166_0.14402018510788395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-ripple":"0.20.0-canary.8fd4af5b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZlsEFMh0mLeSyjCkFCTOFTdlDRRWoCIdWSq6q99l4nnSZCv2CZ3uNmKhaWuH3O+sWHqpNMPP/BhwhfZH5V8MNQ==","shasum":"260cf3a6e04656a4cb6207bf6d359ce9979d813f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.8fd4af5b.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDlCRA9TVsSAnZWagAAJvcP/RxHuRH1lwshcQXxk8oS\n2674hi6AgbLE8kFcZOSh+VVhB4JL1m45JX+ZSPzWLK9X3dRP3LJGGrJqWPwe\n0HaLEX4jD3nSNkrs7d2/hgjAqbxxDUfeF1aYrQVPG1UdTwK1ubfSjrirOyKr\nTBYKrOV+fveulmXNlET81yvhgTmHqA2li007XP5JmtpC3ElIWwRjcmmdGzln\n3aXz0IhgnP5fhvtuRlfTC3/bLWhjcGirhiBxOOnA/8odRwwi7QE/i6yXsqSq\nIrvM3cejo1uD8oyI5E+HgNCkskzCuyHZp5wJV+IYgN5CR8tVCbJW9uzQ7Fs8\nzXYo6WV/XHcxtIvhIeGP/n1V9ToRgRWOp21peGcoLgnvJKB0RfQynzU9P1UM\nVklopZHxd7yngTOI8RWLr0koeWMf4gYRdsq4P2+x/f8aSVpRnOvyaqJzT2Jw\n/XTfLsotWO1c/msK0x46FQ0zy9MBrWY8EOAPl6ZUDlahY3KqDg48AqbwmP5S\ncK83FhLqWr5qjRt1JOU9aGP1rvaE9rVTrk/wVmIIa/J1CHfzFEc+8FNtu735\nifM++JLKrIH/J/y/dq3r7oLuUTkhbmWaLRvVwdVjB4QKyvBNlQfturMquAlO\nFX1wpGqQGBcv2aeg3SOetXQg/bX1Zvr5D1q3fTUxHpnHIBgLfzAKXWYyjqqg\nnMoL\r\n=JsbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYudvciz3TFAFzpNNMLKuRoERTGjd3hbpTDk2Ruj2FvgIgRi0DfRsgbtlm86KthDhsT+tmi5gCMX56Lnf8qLlxnRQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.8fd4af5b.0_1606955236564_0.7285285126197516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.26d14d2f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-ripple":"0.20.0-canary.26d14d2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LuYcpwYovVfEUDfd8pw/SQ1nPIk4Srf5vhmLTq/u5cf90AKDtQajj/JpZmpeMO2rTocvv9qnbXpi2xzZs0E4kg==","shasum":"cac61ebb519f0850a1aea7e294329af248ce5fa7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.26d14d2f.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDebCRA9TVsSAnZWagAAF50P/iiIYmp4LxwBiyM3VpX4\nGo76MVSUaIGawZ2n3VqVJB8jXFhRDszv5itzhblVAWJGjsGNsXCiIqIN5J25\nY+GNdU35b2gJOiqBAiDsO+zG35P+oUm2VjoNhOEHAaZFWz1CjGQKcEgYE7EY\n5DzKePqsml8784OFDjd5OVTrqVI1U/hZg2SNfMCAgjGNTgDrWOnvWCB02DC1\nhXlCz66HIFpHMDC0Su9Ah8vIovfj+ltkPoF+LkIdps4i0GpLBWo3S0sSkfoo\nuecMznV58eGgzbLUtp0nWxRSHe3s1OzmiGITZxIpMpm4aUwHEIe0JeuPHqEU\nTbke+1DX+XR+8PNAoDsMCM3bjm4pXpTZyQhi5o0El8/bZLoQBkTkVDOh/MKi\n90OTlO7w75ZuZAROmHSBVNVbomy4FW7Xzd/ke1tpSv7AfgGhKByvX1bjKKgu\nQvtFxV8TOjTpdpKdpT4tYcq9GXPs40yP9NT7SePpGpkuMZzIXGLHlz+yMOPr\n6OVu/6Dc4MQDtmmU4RjF99G3b6W2QtFT5S1GJ0T2i/+2Bgcrrr4M0xK/kYF1\nMOwVI2dm+hTc7yTkNBPqb2YX2br5p96TcXWiWi5hYFrfSQroWEtXOvMCH9b7\n3KyCboeIqknpe7ZhxRgBKYoGDCt8ggK8MBnyq+gPSy6LBaG65TPRraIrvrkg\nK3PQ\r\n=iTCs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8knLdnSg7AKWyuk9lKSgxU2mJaytjAJXFzGvLe02e5AiEAm2/7E6q67H+L2917QvKVVvFxXFYjoGyAVWb3ATW6rBk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.26d14d2f.0_1606956955382_0.8859829746246046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.1663d7e4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-ripple":"0.20.0-canary.1663d7e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kXen9Ycqe0sgO51UtpdpPWGwbNuF/Xr816n7t4doxhXlHgT1HDNZrbJHH/2abvhZ5gQ7o9tiHBOTninJ29G54g==","shasum":"fc1010559e8f287023d95c07d5e06a943a0bc16e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.1663d7e4.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxwCRA9TVsSAnZWagAAPzYP/2LgjTf6JAo8rQQQMAkG\niix+BhdMy9Sawu2zUl53U58Mb3cXln1lWYtVbN/l/Wqfd81cOPHTZ2ZC2CRp\nrZgv+kRLQewHVUl6UyvOOcF7AlXp5vMhHOZDGCWL5QZApHbTBBIkSQoqStTc\nxEs12mP1e7KGHvhesQOcXmQGIz0driOsnkqQfvMzCYoLdXmK2DkZtJys9o8I\nV0PI7vXO+V643TE3raJbIulkVSob5Bw+nVvWWNFPx7USLTXxLfd4cnOhixGl\nA5SCuobZzE8pu6qH1peRc0UGbeWepYf7XqOxGgm5wUSvlrmEdtXNYwespgWw\nOdhJ8j/v2uval8zFEVmtZqtzANCuzxGjEphFqTBc+XBhAKIYUjy0+ZJDYgCR\n67SEKhL82B+Dq7ZCohP/JnGLP6v2BL6fCU+V70tHLwnPSqmIKeEtVrXyoJFI\nLblTfk5+S8S0OcWst+1WOHQz1kFbaxR2HrPVpmsD64zrHjSMPAepvFRQW48F\nRUreWZdcJ+RE8V/g4QrPUfTRSkWqnw9Xz64lD7amgkeJTzr91SZMvivzqeBq\nE6LYq3kcWVtMsgwaCsAKokO1Gdw3s5inE2tSqD+wDTfosl9Yzydf8mq1H31J\nh8/CLVcs89/7Zf1AslDObj2iGELfFlN3/mTQpy/atMvpxM1scn4yXPpMlaHC\nv0wH\r\n=9JjE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKoVIAgmWIdjW3BT5yFwqhnMLorWMcyvvGWG4MLUJIlAiEAsN25naEgJ1EDAS9YEuVadOMivrgYIZzJXDj/FBCxlLE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.1663d7e4.0_1606958191901_0.24232369379024155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-ripple":"0.20.0-canary.cbe9fc12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6ECIdl6iWf8qc+mcqJpfbhhsPOZkh56cDCiiXjhH3NS9z75A0eHL3404o6b2hOjnFEN2tRuHrrhjSFc5WFWCSA==","shasum":"d97c4e57088c0eeddc14cec7a23945f1803cae1f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.cbe9fc12.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdkCRA9TVsSAnZWagAAEv4P/04SRbqAIskmusp/vpJZ\nH0UjDdSbK+galDpyBKyHSpmEKXvouow9V7ZNFDdjpvLmlXK7PH/3GUWM8yyW\ndvCSj574kGt4KgrwWRp+kF7eOI9TcaeUFi/FUQGnJfVWHxm1oRcvjdEY0Dhp\njqP+jjaS8F+9ceTYTaG0ciDUszghCl4VMF4z2s5lgzXzRIDEi4nt2rzayLIb\n2g0hhwmyPeLCGKlNfvpljvRo3yNe+17YnIwVHudn/I4tmPkil3vr9jM4xRhd\nH9xpc6uMEkkMwOIIkD3Gvv7MgFrMrxZe5UYRzuFzkvjEdftfjbv77Ru2R6mr\nbbD+MNV6MMlaEy8pDAW2AwTmiQ/+YGk0HOqzvkyQusw7rzOaawYDJbzYcUTn\nEoEihwk9B0rEETFkWqITfkgDfBLTQU0XpTJY/c3XiPIAKwAMEAcRW1iulLvP\nUKw+1ncQKOUE/1twFer+VhGpphODDSjxxZI5g9m9nr8VFrzgJw3XoNqgXHoJ\nvwyNWptLXzXkPcOZbRMgpg7cw2XSe7U1Qm6NiyKUoDnBPe8vDh7k9WNLIggq\nNEfPx8ahyT/zW/rnRzDaObtSSRoU9E4oMRWFwMlt+BaJxP5mWR4ejPKZWB3+\nsImA4mVPoQJg8P4uS2FDRT7cTMsmObwcfsJ1GWPn2+LJV+tCMW0f6sSy2pwP\nJ83t\r\n=04b5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy3roJrsRo2wftJ6uTaTAVtEdPkJyzB5K5KHZHf39QegIgIXYmaEt34dmVOAkVamVaxe+GQFCRF0pI/dY23VrMtsc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.cbe9fc12.0_1607022436225_0.7273710211849609"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.9755be10.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-ripple":"0.20.0-canary.9755be10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gNungOr2hoyr/bVmUMK5XpjFndrMv3CqLeVneTzs09thHXmpigBGIVI1jGq7EbU5P89sqXfTqxLJ/ua1zJTQNA==","shasum":"7304ef681bf3666bc4b4650bba10fe45b7f4177c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.9755be10.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTuhCRA9TVsSAnZWagAA5RIQAJ/3nvb5umMQVJ+Hl9IP\nGBb7ee+Lydt49VmCPVyMABWfXLLXC/TSU3/kgNCQuEyg2iQ0H4aJLBoZ9qtU\nQz02ehNJWuhQ+1joQUFgmdu4GRtmToRWmAU0ewUe3/P05cQcZi6iifvj8EoB\n4hBZv7hqPaQWkC56/oWnCdU0IIc0oeGo5+gNZIgOgX0CUUhGCxAerxQTaNT+\nVQ/5Or4b3KhB9qmRTBO4uQ/K8yIzBKG3SPgdjpGziGddqwjybR86brAFpNP4\nDwQT5KV73wbe5jN02vMORI0fOjznus6BfQRrxMF61CvIcrQElLO9/25oCRWY\nqs2ZXGrAnbCYiDXIFT4pY+WBwLONmb7iZxgEU52EJjuA+jSB6+X9hnQu5vMA\nOADf893v83nsi6N76HoyA8JDa6zaXSnBBHnr5GtTgqzJoGdSelaRJ3oX73rA\n/DNNEEalEnS1KB1kI+s19Szy2sEltvnXZ8uDMxQNjIylHIcEopNlJOKcRp0z\nUEtegkQ32TZ4c3ZFNKxnCm9kf7D2bbu7XYUNBb44B8ZqanNc61CtA/zzH/gl\njuYPJ1+ynBRqvQyUHaxAmo5QPQNvtPMThoOLR/vJcA2ZS6dq/W5jcOsNH6w+\nUPfoDvcMo+vt/WEqmcUuscuK4OOOuv9bzUjCwHyL/p2GqUMrAMyygtygPA4a\nBYAz\r\n=eUq2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+B1aTW3aydBYDonYmb1Ezxy/9D2uVYYp9lQEdtQLXxAiBAwDg0YB9POih2ynAS1TpJHnODp0OBFWyTYATJjI2RSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.9755be10.0_1607023521314_0.713630833117509"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-checkbox","version":"0.20.0-canary.3f64270c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-ripple":"0.20.0-canary.3f64270c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ask6bWYa3ZtfYvenE9KKYSWROHsihPZ7dbGrbckKsRi2m5fSl+zBP7UCQlyydp3ctqQjxUqCnTeelQGCm1Ii6w==","shasum":"ff3315e1fc6c66cbfa06dbba7d1a93edfa2503fb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0-canary.3f64270c.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2ACRA9TVsSAnZWagAASuIP/3Im9LRLy+I4Q/X2JHz5\n+z/ucKsFgzI9MpM8E17lFmR+wD0YPgE3T9L7dB+PfbMAknoia6MTpZBEwbEw\nBw70aaLWW0EajchPUeLCZvLPiw2C+sPQi5bQE3hDaEdLKaUq1xsvVCccqcP9\n3YXuKTpeo+MOqsZmLsoG4fbbpPX7//gE0z+d62lj9Ie0W6Pmc/bev8Q4dpea\nX8UBfnAtv8zRezrHU3YAZDN/aw6KPyfM08KG68dofqwhhdkLEEO/NtOyKsm+\nmOOdq2rJ1ctHjJkmGaXPdcP8AbGY/LbqEq88IUdQo8Q15NzYb4ZrL3Sbmux/\nE2i4/AVhkKfKBVTRwey5aZOZ1pBdYPGJ4/pwPH+O6JpVTVcbjIPxOcqaADpI\nkSnQNxWTda8XfQgLrbX7AH93Rfv8WoxUhD72GtuuyacJpb4Z03TWMcAyfSeM\nBrPaddoGyJsb86SY51IQnjbl7AVbuzjcBBouxK5i55m3Q7rbtIPhz+Ttn8Um\nDoV3njjhI11fzkSbgcuhnHIp9OcLSjad24ykeMp9kUu9E2CFjZb3yQKjErca\nBI1OdK9dnzg84uAiCsukD6SZHQ5XaToVgnKeSQTyW43faRyON5JzVtgsGLYM\n3h6eDGLEBMie2++/kjT9vADDdV2MbXL00eeRJO2IDnVXRh4EThVI9txpQbXJ\n+2po\r\n=N72K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGsK8TJaO04pJdPv8NEajv5/duLYI6UbrFVXktywXnrsAiEA1xrGPyWjA5kVkhTdFwaY/GZfljMoAMLv3h5AkcNRSug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0-canary.3f64270c.0_1607032192021_0.4960602478763245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.d893b14a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-ripple":"0.21.0-canary.d893b14a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-N/o3AwdehmUrGKmmBkp5XaJkmRMSacdeTjRNidT3YGIn6GeYQVRqx7gwIiFkIdm7nM3zgeATeuFLciW3EN3PZQ==","shasum":"13748aa0a2553a03840977d56c34cdabed048b5c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.d893b14a.0.tgz","fileCount":15,"unpackedSize":83542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWX/CRA9TVsSAnZWagAAkzcP/iv4yq+q0ZSaJz3EmCAZ\nVHaKyEIRn24t+eMgp81kcvGKUhjQkt/XLXKN90n8U8z/a/CgEaP+0F5ViqVw\n94ll+famgx0OCrmKBt3fvHW+yxwYRym6dAk9NBCbBSkYkmIHZKeteHdWRizA\niGYFuJAsYoNTGss0zlM0nmQs5KTuHqdwZhskt31GaUmWL4pxyG9gtV2iqbJr\nTHLKIswGFPuo9S/QmIV0aYc7EQyRBxY4iHA+ugxWWNL1d4MjfEPDpzZ2NnGQ\nuCNQI0KcRRAG2rpwyUuS7oIcmY4MPMC0b2suQCe3XbCjtfQo8HFvXdvThrpn\nnDV7vtrDm0YbR5TmdUeKXkeEhg/Lwr70RmhUz2kClQbGUzuG5u+7R2O5X8Oq\ncN2kqFKCaf8fnFmBdnriNxRhrYFsMe3PWE5DAl+OZ/teCcEiR7Fr4ml6N++4\nL0pOAqcam8c7YaijlxHnzbn9mA9MoqR9Ov4wC5sbhndTr4h4z81eeBVTl54y\nOAjwyuJkPq7sEEq1hVtIqmooB5fqntzotxwwrqSED4hOmM62rTfAaoepTE5W\ngMMmTkgDl0uTBAB3LBH/bBzMH0UXs2WR3zLqX9G3mH9XaSGaHSFbYlNALUcr\nq0an13FpWrkTrrPVvRXEG5cTO0rRBXvIs0jS7DXnYeG7h+9j5U1dbxEjBp7W\nw9cw\r\n=wrsZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxOb40QbvOmr3Q1zWPhj91Fx8h31aAyZYq0VdLhwbfPgIhAOrp9CrWkn1bgNkBgXwc88n/x2zrexCJOD7L8c0Ayj2k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.d893b14a.0_1607034366882_0.8108202300447964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-checkbox","version":"0.20.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/mwc-ripple":"^0.20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-e7qRFpoTZPeBTU05M/FvGnAalY9fJXtzTIfFXWevpm5xm21zr+5lw4QqJOzN8l8Sj8CwciTZ86GMfKGViBbyuw==","shasum":"fff9d41cd8a72b39a3c883d1b01230e1a3e462fd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.20.0.tgz","fileCount":15,"unpackedSize":83490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWafCRA9TVsSAnZWagAABsgQAJrUjYuvfIjYGa0+LSeH\nPNvOfi4nncAoaQo6mUf5SuKA6vsVj+ip3c+wbjyJcEXa3el8YxnnXtQezDaR\nNeCznJDAUmz5mhDEmvldfinCsaZ3tiCOd6Ae5ZQSByNx+pdPYLIe7plAwYAB\nkXyMmwcAhJUee21MY7waxfk32Ma2t3oDs3Qyml9AyYuPrkqHRnGJ/F0FdbIZ\n384DOXOf6adXwW+frA4QsQHBbL95MSDeoa3ijaIwQEUMopTyh3jfSQY0BQRa\nooT0DndQLF683gRbtT5GiJjM/b62QVKKDCvBArssarF3VZeBVkGjINNdjpNr\nDhdgWbNIJ3JOvfyssay/aKR0kWq30ZncSWPN7mFtZoL9Qa1dUxu1wtZc45Yg\nODMUUzBTO5iqlTv+89T+PvSa6X63ASEbXAugR5ZabCO46NUjx9M8T0ihpmvW\nNaxaupPUWjTeRXOXSuYmzG2lCVqaYHZdJU/P9eNTbuD5h1KfE0nlH6xBY/LN\n74peT/4F0+GO/7JL7t9p6YqjUN6OiHrTbG9LbG2qjwoxQN4Xmf1pdhjuyLu5\nqQMMbDLuZq5JLeB9cpucAwW6X8HwUMwBqTW9P116qo6s2K22wQvgCW87DkPr\nuGdZJePIPNIdkehZ1rmVwd5LT03dQHvtMWfkKj2KU+NtERJhBLY5Qk6r4X4J\nE9yG\r\n=LuK1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnxE/UqmpzBRcDRayqZkF49nd1xZZdfuo7bkX/UnfXjwIgWViDOm9MEai6gz0ajzfI9uW5Of1KotW6BEKyS+usPCw="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.20.0_1607034527053_0.6195380463085065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-ripple":"0.21.0-canary.47c7d7e5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZbSbAisTnPOMj/WSvZ3IUwcY60Y+iRqBm3OnNfb3JoDVAewSe1oxJAActRqnqz9X/3/ZWJQmWWRJE3ExuFc15g==","shasum":"e4110672c2c16f2e30bec88b2cce8cc4cc471f30","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.47c7d7e5.0.tgz","fileCount":15,"unpackedSize":83950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088ICRA9TVsSAnZWagAAUzcP/RDH6/eX3peMk/Ln2Ju7\ng9qHsEkUDFne9NcIDqKvwcInqaLHWO4rpttCB2KyCLGx1YEy7aw702c1d+j7\nGJVmJs4uwg48Vb+KuYnWgRL6VVmIjh9A7mD3grWPVFxkMlHJAuP2JmwiIYCn\numfaQQ5f2vz8QoloOM9zgX143aDwhKzSY9rg4rACMJdO5PIC5/CnN9gXLAoy\nGfJJBBAw/DXtqn1qgPXRIRybs4cF7d60F5qEsl1lb4SuWmXofVvAcCrBr2jk\nBQM8AaDPFNI+suRXg3PsJevZMQzMHWGhpRWS7tnYWfZrWN3Whb0xn3FDDbo3\n2E27E3HN0v1XpF6UdpJNl1rOsjVonpZgjIM+NNIfOevBDu5JSpiWezmFHPjv\nl1Xoj6GhDm2V6pmW3yr25194GeJFEtKSex69w0V/+wpi58MPyAzhwChPu5N9\n07tvGkxitKAeoXCHOUar9pDOeoMTqhBonMukFTh0ug6G+SlPRy0j5ZqpVmiR\nEnpCEIXcCXaJA7n89/y5yoMa2bExwfRSvZYXnuKG5mSAUjy+eCYhGGa7LYr3\nwkq03zQG6mtGH+xgEIXuKSWGszwyTSWpjnz3ONW1MOgjI682TQvWTEDoIf2F\nbt41q3mUcLZb1Pdbi+gPwOHgaLKcWFMQnaYLQWB5ItZeUb8PKJsv3GZOtP2l\nRFRH\r\n=ufei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6chiMXJr8vMNJtApZIC+JoFVUr0rkR47vcrNHeHt0xAiEAqGf5DM9RYJN/v8nefGznelwxH7kOtg6021WKHgxHzUg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.47c7d7e5.0_1607716616199_0.5447355272439325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b304a78b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-ripple":"0.21.0-canary.b304a78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wxfXXQ5m2DVpWeiS2Ve1IFoqHhEOT5H86F4EwCy6aqIXtVfIaVWWHOdrCw2tXBdTopfK9LQ2eS/V9EWNqtUkFw==","shasum":"8328b78f37a7d569d24d26ecefd996c6bc465901","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b304a78b.0.tgz","fileCount":15,"unpackedSize":86490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RawCRA9TVsSAnZWagAAX/4P/1ZpJ65pkI7kADVDLnW+\nB4BRz58jqkPlVGPZmbvFjY3cbNh4vZPEMxVf3YagdbaylM13/GvYu3D/EykG\nNEYnbFGoE1lj8NV0zu3PlqsEkV87Vz9RxdVsHqQaWaD98fOwD/VTyK/7X09K\nEZJRlb1x0rT/BsAEIkPmlWkMx52W2OpEAWFtK61/hfW/b7VBuHZi64auvKZI\n0BOR53tudCw++aatgCnLpE8HIbESXFKaK5j6R9pv5+gT5b3FlKOJ/wIQlzQo\nrwHh6zif8OEHEAeZ3Zw2cQwnw7vb4bn1c9/TP/NSrtab3i/btFY9od5cE3tc\nndmqurk2eS6aZLJvFcEs9oCKDl7uIl7qA2AheEkcThobYZ8qT5jentLP5kVp\nst48eFBLTywZ5UMaIA8RWDIps7d1W9Hwz1VydLURSU9MwRuzcpBpztJb/RR7\ngRyjFxQBdr2nmu1owLHaKHC7iE+Tl4CoWuR0i2nlwML/PDY3d8nRgdwt696b\nqt8nSaIHyxy2ucAGigUhj2Pe0JibHtSG/dpvOYeBU+LvjuH+olNm+dZUbfRU\n/TzALgWxeRJn6G9Ud7T4OtaeYMmMb32CM/3sUly/oJKIBqqxW3Hr0NhGY7Jd\nqsYZu6l2kP7IqbId0KZPuTRpDG6/WWey5PRM8wIy6cAIYAsesO1XYS9D2F90\nVf6+\r\n=ydff\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQ84ZdgHI7cnCucOMH3qK4lEXflScxx8Wl8D6TRUKMnQIgSPgzDDLwfJF8WMWImzARWyEudKk6laIVimZcxonmiGE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b304a78b.0_1608062640089_0.11776748894595501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.777c5fa4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-ripple":"0.21.0-canary.777c5fa4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cT3mcuCzg8Cj/VW9cFO0ejbmDEgLM/vwppqWkXk90nyNuDzznKUVlwbZ1ULHtL/XNoNUFKqG9MIPVaAGuX0XEQ==","shasum":"d58a513d980cb5b73dff8b06eeff7166ec7bec03","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.777c5fa4.0.tgz","fileCount":15,"unpackedSize":86701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oH7CRA9TVsSAnZWagAAMKMP/jr7xNepOFEDHxyiaWYr\nrTy/t7g7NRIeDkVfe85zf8xjO45dIz4zG0JzH6SJc8pWiSJtWi5dZvhbbsgA\nJ9he2+jSQIuSn/kz/50F8XYY4f+qG9BAN9gwnoqpp6cqFPUN9wsh3C/ACB43\njOZbcFACerz9wcaV6Uy49d//8g0jOBDFCWf0dQptstxi39wfPoBgjs+TZSC0\nYVrTMnB1gAYUribvnzpU2XDy9rNkAw2POQ2z51Vb/rtlyHkY3+eAPy6Og2Gs\nVkmTrX/yhf0C/qQ5dO0qwGshm8yoGCUsiFJQaI0vIfgXKmSnEbtb2R06UZoV\nqF7a6iTeNooUJmae+//9mqqs0VPnhOhLuRYAfQmCJU8RxpdZD1V2kHtxE4Kk\nCNwEwCWnjqBbkZSkHVJRxBTDnoALj0mVx66Q4Wj/7g9rqUsEe0bCNQIZsgOD\nNVX0ftJovSQnB/+ShoAth2R/Cd8o4zY28FcLZq458q+lLevnWBWIPtdIqVd0\nYtWeA7F+At68q1zXPUeImll6fROUxzngMXpHRmQga6Pb26+iA33OHBByF5/z\nUhOWOgUXUvr+LnovgoibwhDiklGlHZS6xrltWqi3iE6g20ZzGghHwZ2lsgvK\nWcd2hK882TpJ0weQ10deGPv6lFrDEfXwHKYPDemn+o75NQnUeneKYZq8afVM\nAlbD\r\n=jhjJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTrEiPzpjNjRLf5ekbOyI3RuQ3ufBCrcvwjhve6jFjVAiEA1ulVPIJmkyrXJQHCDmchfIEbvhwNBd7qNY3m383F4Tc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.777c5fa4.0_1608155643009_0.1256943477743122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.635c7996.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-ripple":"0.21.0-canary.635c7996.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1NYYp4u2Frun6Q8yczXYS1lDnM6PUbSVxuepG6HGVakqpSG3ojrJTSmJnArLjOc/YAiB90yj0nwDxmG/Y/ZiPQ==","shasum":"4ced41463f139f8df77a405ae6ec1b3b26c3d7a7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.635c7996.0.tgz","fileCount":15,"unpackedSize":86701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+poCRA9TVsSAnZWagAAltsP/jcu+kBRQ9HUrysYAN6a\nyWD3ETkkmIoOY6yCvYjRrDojn5xr/UQ1QY+w74HsYFANHM2E1MCIhzQGss7u\nRI4oXPQOBqpJdEksP+N0SE5SAXLkNcF4pSw1THvRvOuF6gcSKnx5oBVoHeNB\nmW/jQnEmzPk/aYrz2gxYiwpCO6+rZCf9VbQzn6NLrKeCmhKlS9yX7x9P5bg4\nIVA6lPv0IaYVtzQIOcDITZSijnRL52qD6xlEPNEtAiLPNk0tdHsd0szEEtI3\nZv/Cj9IJTn0vhnNSbM68adGjKgzLhLNiWXLgRpLOMnk1IS85UActPUqHcAmA\nWVZlamReJkCWEnsBi/MnwMTrWpDDnGi1QkaL8Bop78cd33Zoq4Nc3yZ+kp7P\n0vlRiJCBhE/PJHEbmv6EsZRzVz4/xkTiVdJngynf5b0w4A5eAl2ATLHhbdku\nl2u45n5jNZSefv+V5/7BE11Py7AIZ9BGWCuHxnb/sJOEyh9GT12YBg7jdDR9\nvVSRyYm21PcwcFBxVXUWnUYkYK3XQKlmik2Lxos5KlPiFiKiCdDoNTaUvpDW\n19AXaYt3lN+eeRaKiLMKTmIL3UrfQ3I2biGASaFz4LOR+RIMIIMMEmPj4xg+\nbXx3/gPFv0BVIW7mAtrtfTQJP1UigzitUhoheUVKJVj0MHyiegAGSbzuCIW0\nv0Uc\r\n=TqQQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClZlxQ3RONKlVCZlZGMxYCNZx/sw99Nb1n/IvxcYdhEAiEA11NQ/8RrBrQQJWp4bXSINLj25r+8jX9Gfb9oUAkiKJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.635c7996.0_1608247912160_0.06337116449955982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.20b0045f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-ripple":"0.21.0-canary.20b0045f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pnIAX6xWXTKTr9V5zY9rHmdfJ2yYlwOuphX2++QbcaXtX+Da8DUZQvq3dOldgslqDjA+eYz7Aypc2GMr6syhNQ==","shasum":"926072b501d568dbe663cdeed059649e97f37f34","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.20b0045f.0.tgz","fileCount":15,"unpackedSize":86701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5iCRA9TVsSAnZWagAAVWQP/1GeoXNbfAPENOOhsZV1\nJsg9ikapdAR4xm4+ngfPwMEBm1+i6r7v8nuVmwgIx/t6IUM+awggmkL+asLx\npvM1r/UA/ol67JDJ5O7io12iD+RtsT8Z0Aw0tB4pU71gkEIembVI3wVtdJ1o\npreyYpnbw3v46wnKqaqwM2UI/WpqE0tMCL4g6B1Yg2PhpHElgJkDO40MDCxs\nOjxn/0g7FJxuMjS+GVFKBl5+EofsjK7wgca+2QeqlHVzFEBPAhvMFbV3w60u\n7SVvS6o4VWPPdTD8x7WPgfc618PataNujyvkKq3hz0Y/fmxPA+HvD+/tLadO\ndJDDZ2C0bIYjZFwp8vxg6GE9OZBR+6dxEiSlvV5heMh8uOBDp+JXUcPVIKe3\n/l9MpaDAH2SR/l5dpVi8uTRD9yLkMydzjSLvivvS2yhScsopc1x+CKYkHtcC\nohZ6IZSW/n3wozQp0ZZmLhQFq6SPigzJmoQzWVc8cP/CXHOGBICtI2PSbq50\n7Fb2XLfmA3hGnQsIngiW99+cup71tJ7tbaGw5LAXygPA4roJ+Nh1W17LdOG6\n6pjfZw1z1zmhndiKcgfZYlg/dlpQM5rvzG+k3HvaXtm+oI/OkJeqQCOg1kQc\nYavqXsDG+4W37+r+C40bkim98nG+BlpY9BakwW78h00zlc+7cH3uerL8AsvI\nLueT\r\n=hQro\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCRYumOkXazO8JhCF0qXxF8gEboKdEu7yEGOKQWwl5swIhAO85dSKnSyix0YbDJ20LQrvM3txdXKqOIHHVJpqK9lCe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.20b0045f.0_1608248930220_0.09706615595285761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.41f77000.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-ripple":"0.21.0-canary.41f77000.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Gm4V8d6EaHcMOSx7S/uCFht0XnNFKA333Zc6bcN+rTmQYtu6V3kSZCLtbKeZU+vO01741ziiMh2Tf1JB5UGCsQ==","shasum":"b16021df903915d2afb8c615b93e171eb8981e14","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.41f77000.0.tgz","fileCount":15,"unpackedSize":86506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lCCRA9TVsSAnZWagAAoZwP/0pNwrbX1a7AL34002uE\nFhwgZKywHLXGQ6T+aWd0MbMF3/Bx5X+6IDZmGkIiHPqRqZcWYmMPNKVQxWpd\nOgSZHmDNLo+Oqa5dy9rX6aPSKMzaZcMBbjI2eVj90saFyCJx6tbdp1Xusem4\n774iOnBkoPuBIZkuZBd1BjjxOt7tip46ulcX68TEnn555NGt1Ba6R8A76gYO\nbI7GM85rOMWzBXJw+0gUDR91P5+hWuyqUCqS0iAtUWdKocpawOesRH+pa6nF\nfUjO49YPy+HeL+p8+RKCCOlvP0ngJfdxmD3RV5ZS0pCMBOQNeR4mxj+0VFC9\ncZLszLoxQVi1lsq5qAw/Fz6ih3SdzM5Z/s5l1RO5YGkf2ps5wu09sepQOkav\nb+y6R9I3kVT+iJHQRw1pYIlEXWaBvltHt4zAF5Zr6HyVuSGCOlBnQ88qsZ30\ndrfSUp0tACmnyirKU5T2eK9F0HUVygpqYbiamcUF13DL3PgtUpiIammvk9eO\nzKaMKnv084JCfiFGywRZPF2elzV56xSY1baEdHWvXbZYHZi828BKqh8StIjT\n2b4eZslr1FtbcDNynAFqOoL9HsqGSkxG1PmFe1PoKwoaijgaZlcpk3GGbu3d\nRxlc+EXsAi6lAOr3ECwLDkmYg/JQVpPuAHQS8FSFO3lGiTdvTrsWXro5FpWP\nsVtY\r\n=6WXS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC454XYbezbxGMVhX1i9BQY72veOWHZ8bXBf6IFEjekWAIhALU/5y1xtjH81KSfK7YpXBRB6YCaWIeqfrbHeHS6RIoZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.41f77000.0_1608251713647_0.7304359637406632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.afe4079a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-ripple":"0.21.0-canary.afe4079a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7vT2IXS2KWO/EVNcPqhRK62gTiP6F6leQ2/Ur3Tj/xoaXWue11/OdGoFw+dg3jWADICjxnj1ziO7fiHycFyTjg==","shasum":"d7e95e404d464f10f75a2fddfb457882e506d067","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.afe4079a.0.tgz","fileCount":15,"unpackedSize":86492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9iCRA9TVsSAnZWagAA0v8QAI5oMbEpeeWxUE0sFc9z\nh/S7NQOMwvWijqfD1D6o9MbxzVv5lJ5g0B0pvAsZ6oI8yhTPP06kC9IiTc+C\n583Gr6kQTkD5mxfDntN5aPpUK8plC2mkoCfDkmF3qs5HWXRzMGLGYeuNSxtD\nn6uMjnNgpgaWeC6qysdlFXccekvurn97QRu2tCvKUBllG41eSc3uMDwPKBHN\nWNOcUGlTw+wx84tjjcLbY8pET/nAi17NCC7aT3A5fJJzX+hLQQx16ZdxIcOX\naDjVKI1hyOdmE6QDClZreHp85oaKvNE/QvZN5cMIk9UjeEkXW3gbmizptFeO\nS2eAjo5ROZkEHjd+7QCLAtOopfX9619U37CEDdtX8IHaa458YiIe2N5KD6yn\nj73TgOfnmy0XYDAPYNw3KfX2xZF9J9V1kCUNEznKmOoBgW7wJBBvoHqM+8vd\nzXl121j8vz8FKXuG7dBnbb7tf9hV1pFQKOqxHUt56zaCLTTW6tzdyG3Yzwc3\nLaxt3oiBVFdZ3UMx/xNQk0lP/24SMnVGmlLojdIsLQ7RpTxgapiGeZHsXq7F\n0j7TnfmY+qrii+Zux8ndZp82ecqEFvExJQSIrUky5bV0QK5eMPryVkxNUl8D\nOHLczkK15mMQiRdghzqVNBWGThuPhfh+Rhd71yyrqEyxfV4JmuSXAoUClKdT\na5Pk\r\n=2gRX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH0VVg7UqfRNUX+jC2y3pdy4wbDtqMRYJUJZfFR7pAaYCIQCQD5uFu6y8fXEgxKLM1ppicX3U89pZgEAPQB0c0YZJNA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.afe4079a.0_1608658785775_0.39174371565735266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.407ef8f9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-ripple":"0.21.0-canary.407ef8f9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8JC3FstBPnXd5anjBMhch6VeKaqO3hYHEcYnB9IulW4kMAErQIQ7j7n84DiOkW0pZsxbkFkXmRbxwQ6NxU8kTw==","shasum":"0ffeaf764fb792e4f453a69621c724d7d051e71d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.407ef8f9.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcUCRA9TVsSAnZWagAAtQQP/35sGuCY6bkrmb2H3yml\nFgh2yzapeFhobHZRiM8o39dOmUKlfs1/8OKyABj6lnlUYWXwUtrwcGID5eKr\nl7HqWT3p5BLOH/FyLaX8jaDNNGv21jEdoGlcz/wISNBt5sN2s7kcXRaeHiQM\nQRHE4Lw6fb5m+voPBbB4WCTZdXB0WJ5+PyZfDPUfeokMB8R3JCL63lPqillj\nVdF4vqQSk7bZDJPSplDu+bHUKu22Lyo3Gwg8+ABCkEIgKG77ugYTaNCO+das\n0LvtvPQux2jc0iD6xUBtisWgJhDI5wG2jXE/TvKjiJNgPhdwO39us/rwPjpY\npYkb4tvIMU0t7yPGDCSid73qzSOGZRCi+2P3fL3rGiBM1G8eyMuWjYlhoWOu\nbW8J3TvQNkamhPssA6xCZm+y8UIvg2XzFdkhxn2SPYzhAvX63d1PtfjNpe9s\nKX8/bSmtSvQkvXWHeLGL+I/ha+x7JyDh/NQsMY7jnSzMt9lvx5avhx6//iGE\nxD753nkvMLVBQKTuRadjoKwRC8YwX8IpYt1z5u863v+Az2t+OQa5JPK8RYHy\nPsO/FCUOiTF/5yYjn6uR4IUD6VXAZsOC8o/iWVbJJhi6wExraN+q775FTh1C\n2yns4dc3HfDNUckjEP150k56aDdJVRnmo6kO/RPxczGXNPB8+7pwdF8Q1Vl9\nd7AF\r\n=TCj6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu1RAVIt5tBmiC1fMUl+hz9/dGwpcjZvdWY+7C3ejzEwIhAOOUQjgxv58M1JiqyjmdmrLYf8SrP2c+RiKN8i4OX1tI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.407ef8f9.0_1609369363999_0.781068657250235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.2e26e137.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-ripple":"0.21.0-canary.2e26e137.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FMlLQj6XyTIltkKq1hNeaR4tfNS8Oxbi2NZe/lwx7ag1XLB6OiWX0giSPRh3u4ahF3WHDlHC85Roz4+4PEjB/A==","shasum":"1af4847f20eb659bca96dc98565c4b16decee18d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.2e26e137.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTECRA9TVsSAnZWagAAGPAP+QAxHl6SbWWqhFnDEcYo\n0xNhDzMoQ3w4q+hRfiXtwzp8r9+jV1FkLfq7rKNw7uDAZ6YK07O6SkM9V3or\ny3QlhxGvNrLS30WzVaTClvQwf8oOuG8Rk1adxaa8/fRJTX36M1QKLr/r8b1h\noErm9bJBxLO6gFacAz6Zvuxh/prW6JJSyuhi8zI46qjq4wws+Cm/aNpX159v\nR4p2QZEy3BYizzeaqUNC8csoccC3EWNz3rDiBNuIu7fbOs3fJS/C7nvtBgLN\n90pJt4Th1fpgOc+vUn4qyqVRHB8fs1sS/hZU/DejlJ5y2SCuGJxv69lu/h4P\niqbUUrUr3cvNO9Fc6eA4t28dq9B1YHOc2eZIYzoTiglNofRZ8oFVgds4mmjV\nb9J9asjmCi7pIucZzAV8CjoJq5yo4NQb5xKZlMMYVKbs/HigTly8DIYwyk9r\nENl1HcNVdsyWXwJDlTj7Bikn6HUqb9ekH3nth5jbZGBdb8ZqUlZP27oCOkci\nAPTFQvdRhGAGsujTnnYF2H7/HbXz/jmbdBASU0a29oFJBngzMmmb5SYzqcHC\ni28Ab1URAQixLRZhgKQjG2VQatxW+hViSTAj33BNhOufK+0ZfIqDK2c/BEiH\nG4RugEow3oV5gGyn1Ua0wRXz8c5C+nEHFSRVsLBYVti+Q3yID5LEBgna9G4A\ntNJW\r\n=aU6u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3zojZKnh4I/AGVVIsqUX1mA9iU3nPxFe/enTso1cWaAIhAIOMAbfw0/LPEn7eXFRUee4NJwrsiM5FI3j5yKYvdWRZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.2e26e137.0_1609872579827_0.20846433597152303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.9009f6c1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-ripple":"0.21.0-canary.9009f6c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SnKZ5ZeDBeMYhzmzPXBLG4A9G0T0T8yTayJAm2rtecfIve+zk4jnw+zgMngwLLRehdkggWux4vP7iH1T+dYwRA==","shasum":"df6b9a4d61b44501d4f310b7c0ed19c339182973","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.9009f6c1.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhtCRA9TVsSAnZWagAAx5IP/jrwU3aB+sWQrguLRL6A\nkXsR04pdYyQr/5klZJlbQz9hj/3b5+e4bDgBRVCL0rjsvBPJmEa70bZlpGmo\nktP9D+pldwDviPYhEspU5zrkXeLPVsknuR3/0JzPk7dlhDtjBPrH+4Ax6DAJ\nM3G5McwPI5lxoZ6M+eXPljC4BdfCu0aBk7xehTpNxpIw1kEe/SItme/My6ui\ndoCg6B7GCdDndD3UP/QQLtoQ1Ne6v8MbVisI2PTuesKmXUWiOf7UKv8lA+Qt\n+MwRuYLo+/ReaM+3Vm75a3KzxvPkAAXjGRiMRsyIbE/7Vt793AbATn2tZ+rs\nI6si49JZThoIFcbpkOy1NE8JdHVIQSeuKPQnNQvoCxjJGDrDCqMMSMMqowF/\nSj4wiKVLoTNryjaQq1ICZug+DItwFif7bla1OUwmT6JVm6kHdAI9/jWCn0cS\nN9xRV8HnxHQKrfCGpCbLuqvLkoQVPRimkEuUgW/lZ4nWgPG8/Ifw3mNPhK7K\n4wM+VM9BfJYEs5BjeL2HKW7uivp/fiGkJwYmYZVAOhaIHM9aYcThh3d5PIgS\nHoCT2DWFTH3S2wQZOdhR+qgzHPbFs2Qe8HT3HfXnWo8lJRPBCcpPxclL068r\n3mesd8H+IbDKmKTnNK7VRxTtmBJZEbEhWBeRsrInoOJPcGnKZAfyxgXKgbl2\nCMty\r\n=MG84\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi5xKhuQ04kQTY4flMWQJ8i6Bg2j5s+3WHwRbisI6i1AIgLK6bcA/NPCc4T+OLVDbkk44X1J9WGgt2MI0VgfNUvHI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.9009f6c1.0_1610135660616_0.3551948241400038"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.ee99b646.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-ripple":"0.21.0-canary.ee99b646.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vJhvlN0+ljOJdFhXiP3bdywhRIHgZpXVjY1tM76ya+Uo9QCjHVfhVE6swStvtXVUpr/UEFKCS3PLP3KwF8mZ/g==","shasum":"f95a9bce59e7df0287bd0bf3e3680bdcfd8cdc03","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.ee99b646.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpdCRA9TVsSAnZWagAAXrIP/1YsswwNim88EdJWgRkb\ny7wpW1vNZCR55vvcwD0CY56bVjXqDizz8FDD6o/SgjJbFKY2hnjHMrnOqyMm\nEmgYS7/89KU6tphUTqW52t8j6jWo1Vk1N28l/Dn/UFS+s+Di9j1WLHI6djYe\nfzERv2tDY5VhRT0HCcgi+1R3mKIj4WdHRpgtJS+s+jSy+nMJVvrHFkcSotku\n4YTzokjpnyWHo5jDHHl8zQOmFGBRfI62+I2I10M0ufo2w/TzkQAWJjHupbpf\n3PtMYZo9jHWhDvhfQZys8+ZbDtz1I0Hai9eCJO1o8PMUPHcJDuXh/2VM7JlQ\nj37/YGMl5Tb/UEh6GwpnOSL7p3iBZYtnqTDSc1s/84AvN9GA27k0coTaEnaP\nCp+HvU6U8Q+jB1Qi13myxXAc+JilH++ZjER2haetT6boMSBWnui4zsSXOBL/\n5gzzAQjAYejz+204dpmmFz9eHvtyH6vEmkjAAnqlhsxazrkNcIT5a74N8ChR\n3+jXObN9pxm47otwIFjfzfeW+lVtzVqjxR6Kf3S02363XDP0vBbnmAHzdWwa\nCnYxLtwPkFRhlv3l78VtejRB8tXLnDbxlTdXSP8DVHrhT5m/WBAMjZIpbgTi\nS45Vm7pAzaDUvs3oScN8oD5PF7NkdxuUoM2boSEveUooPptNh1tAEPhF1o41\nj6+d\r\n=P+Rf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBg2UXe91AH0GTg37EmKadISur0a2UknX0SEhaEdYChiAiEAiIrbaeWtv7Ew7N3BKSyHlyNjqhdjFxkd8d5aSQ/MNgo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.ee99b646.0_1610406493228_0.9606826250701672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.740ed33b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-ripple":"0.21.0-canary.740ed33b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Id+BknOteOrGyey0/p7p6kdxBwLDzzreCuPk6teDvxKTJ6GnpECU+9rTqG689On9RSPp+nKG7F37BPTvLY2wug==","shasum":"812b43d8bf148c13658f4e26cb1b7ad86560fbe9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.740ed33b.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSYCRA9TVsSAnZWagAAxsUP/AghwBMsgFXJZ3/bNYr9\nxNFDbaNB7+c9hTAmxdBuKN+1AdVIISnNupc02g074ftLmrMpSfI5jWjdEEpg\nG9593e6AURf3/h15PWImIfmBwopEL4UvNJKLY5E3ywyLPl1ix+oECi+UE1zb\ny61yCFQR9IOP5H6+3kTQHGiIaVvcVUIUTbNp+f78158/irhF3RBRfOlPBArJ\ndxm91MKmPKOq+6pLQBtyF3HuueqWN4HegH1tSBIHzYqO4jyKfbG55McFioqC\nv3TKkwYQXdjs8ncr7wppgzwetYrVgEgyz/j+N4rhmqH69qqgb60SUYdG3bLo\n8MfGzJ7+m7Ot1z4ZI5vNtfq0gJsEGu9NYz6roA7472RoailLi8nsM7IT4wkM\n2Hsjx6nzC9/Bh1BPHD0nZ5sY69XKkoPLFzQ5y0iIXqrSFEmW2IUuVCRyypjy\nWX+DBbPrOdSvPZN2Y6A8p5Vw/nzSYaT+dNCXbOirAaNxL6qEVAA+HZ3Kr0CT\nXQfdb8TUcC394Lo7u6yMbqsZvXbGik0WQdguy35AU02pna3a3FmTNVnCtDis\nKyC+ZkCa3aIaBlhizjIo7NwGC3R0LLyGR71pkYSXHzVNNrqhw+SSFUoyosOT\nHXqe8hcsl4jZL+Av/3FVZzW1zcajOJwWqC42mX8JK9qdjDSlKIG3TngcAAtZ\nozEo\r\n=x0ey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICr5R+7L9ot2ozYMyPEi/PhdMI5PoYjHg3GvjKRGuNDNAiBEPOAy+qtEb5nBnI/Bc7mqIPR3WEpRGUU+z51/z/JZUA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.740ed33b.0_1610474648076_0.6492415450011235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.c5c541b1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-ripple":"0.21.0-canary.c5c541b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OJBAAP+ZbmCUcdjT8wfFxvFGhME7Opnhcqu+2FMyfqoEhrpbKz1ITMayTF5B0nX6GnofDGEBxBz6E2jfH+7zOw==","shasum":"9077943517ae75e08049a03c344dea2212241d12","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.c5c541b1.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5MCRA9TVsSAnZWagAAee8P/jAHOjsCQgjXgbjhKE0b\nQohEcDofZAKzibWp53CNOfJW1mh2wpN7XI1ctoinfZF5dw1/HiG8/Zu4LHyx\nKqGOUNU4tGPB8Va3WDuoiaEVKrBR9FW2s9fASmtTuScLCWKUNMC9Zbaav3yW\nMPN9oHy2qtJiM3X2wJsI4zcbdO1ASdQqR0wpJJ2kWYDY5NOPpOyUlb3o50JW\nHaFx/QWKplFv26R+KzmF5kILq6eAvdj31WcZvigzNEzEaX9wFyQzdU+TiMDT\nYDWL1LbINsRBR8LglI337Jm8lFXd6/+rFFI7PAH1FmZ/z5+v2Kj+7f1k8C9L\n1KUlGhWoT4MfPVnmDkkE/cMkES96fDXucsjEs6GsiEUSeuppWU3ihXlz31Jg\nK7FywX2pOMXqFvKctgalo2yIyF2wzaYDPt8t6qADQIpAKULnoUv/ZcamUFJk\nqNid4sTwILyc1IvA/1mfW+gZvlu6RejdkjnIXQlTVJBMdcSBJCyCRb6ayvID\nwbNnXEsxmT1bVhCChn1k7Ga8EsH1qGhtbMd1nLEzM9cIHu24ro2KnSxCZtdg\nLoLgslv2ByVoPLWT3nH4Ww5sPUJSdc1mqpRWX86a1DqlzTmhYqOOzYrzprhl\n/o1EGD64LvIsL51CPB1bAkYC67FFy2r9itUhpYjYYIxKvoWJoAIHi7HT2k4H\nlFZ+\r\n=bKD5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeRzkEdJqF34PAN9yQH+78GSta7Xg7AZ6tDz5SCZKKoQIgXTrjg1spebO1Rt4UG9bi8OVgR0gJtV8ioWLuR+aGMaw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.c5c541b1.0_1610477132171_0.5650194101526949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.06fe9d90.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-ripple":"0.21.0-canary.06fe9d90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-urBF2ULpMKdCiZosmW/q1kZtCz1FsmqDmkAi4JVSDnZGaVep06zSk4uDU8WSxptRtkw/phzHpbxlJ4hY1G0YIQ==","shasum":"21db8cec8da87c1e94d3711debf4f350f4baae68","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.06fe9d90.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gypCRA9TVsSAnZWagAAtJcQAIFmIOGxDHQANSm3UBJq\nXKI7kVcdVqlBtR2OlWGwTq/FLB18mbYkmNXE892WvScnhywpLesqd/l8Pscz\nWR9uMWerCiHHvYtofCvuMn7xI/wnM0Ai2hiIAZuIZPupUxQhiauSme4A9LLX\n855PlMVbvIItvNOXSc4/fby7CUKTi+2kWnfvI2b66XdkYP2YAu/jDAgHgCYF\nE9aBBEWyuVOl00aSND4pX6ZL3XWkBzKuDNQ8hq9qX12L31WSzEY2OpQGsuZW\n7R3J+yPAZMRqzigSiyvnpaLSIWOhM57TkS2vGYpDuxXyZLrLleULf6yEhQjB\nbRZLtCBNhWMn2jupCLBOGcHP3O63825Bi3tvsChf/pY0mJ0b0mmtvEi/sGIQ\n5BqYCZcLEZ8hjy50JC28xOCctxRti5b62an6vX/FD/wEGvPNNrLA8DzYdRod\nTJOH+y3SBp4W2xogZpcYtfw7e6sMM6TRJnr7UWHMxrahUAXL9U0JX6pygijO\nsiR3s0vgPDFJ1Sp2cUjwHTURvC7TQf5EwcOZny5CzmVAjTBvXZ6QTEmzmMb/\npL8LJ43s6DfVgqpaTk1CQF3e6AD9Ta1mvVlLWgbXDFXbOqYhWKPf5aSZB+7B\n9qSjilYml88EPnN1FAj07JADoy6Nh64+amxgsnnuVIhUTIsVzkJAFP9M9sYa\nSxXg\r\n=/isy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8IAlfHd5ICtPtI6jhxG0S8wzeu39NGQZZHy7Wjwj4sAiEAlVcp7Y6/zikRNqHNGfoYtEe/KWHq8M60eUF2nYWhE5g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.06fe9d90.0_1610484904787_0.7009785518730849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.269eed01.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-ripple":"0.21.0-canary.269eed01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n3hgkF002SAO4aviDbWn4EtNFgSs0UTHb70+c7WWbjRwmj/Mi85ryxhHdhYNzV4xPsBK7mURjSqbukmWXPyLzw==","shasum":"86a51030fe85d5ac90bc9ac68cccabca96523577","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.269eed01.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nsCRA9TVsSAnZWagAAMqwP/3ZOSWwq6BrrkRO55rfU\nW3ZvuCLwNqJ2VFYLxaAJm0e3xtRqeeuvIGz9agy6/YveAw67E4VMv7w7pYHl\nt0qAkGznvLnYqIWkpwCdmlwQI7uLk1JNsX90NN1+zT2WSAv2SIAMSkCT6Qwj\nQzg1Bvm8/MlIjCKI9lPl7wssahjLZniH03bUl7tQLx3UYUa87tHswSrmeiMT\naeCGaDtRgWNTXsPSsaBwlvmWZno92+c3U1XEQdsskcgbzG2vjAKSTS1Cr6O0\nVtNjhHffh/aupOb6+5IQxPE00FH51OQ+UQUcu0d5zBfU/uP4DWEkoZiR+mQd\nnKeEaBoJzGTA8eFS/1fjl2VUSSTYf8k31ig/Im/Kco9g+Yp0LHKAtRp6P7lj\nmFypi9xyCZLpNbtQuUPpyciIRM51sc8Pvgy3RLzbGpdWOMyjPNiaMYIEgnse\n8uV365n/NDKLFWCZhn4LD0NuXmDGCLNYbkzyDodXEjXkn+nhWGWK2eglT1ie\naIpHlbCrOLchcqQO28vQcjVdd4Ae2y6qkF9nqEjJvIB2gSfJq03XMq8OHChI\nh4vUKUe/z4HPfBKE7kENLm+l4Hb2Ttqkso1UseT1VaEijIU0y/3zBj0Ws1T6\njtjK1x7NIGoTqYfGdaI9+QFCxsiYoQ5Zy9KziDayvX6DrXNCK3A0NHTo5jN8\nOzpL\r\n=CZvU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQEwBf3G2ox8CAt6IClgOGMxvpdb5dLrvirYqKuO4c+AiAf0jAiJm6HUDNTi+QFFiwmC1mol3mYqLiDqQmS4Yn0dw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.269eed01.0_1610574316110_0.7470980405826271"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.8c075f35.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-ripple":"0.21.0-canary.8c075f35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3nde/ZvCVP5ZsMbeVhq7/zowqQM79qDiJ3x2uhGM8kqvum5tx7Gg3p7x/VpGt9AjLq2eCtWZLr2wl6w+dZ1cyA==","shasum":"25aa95750c96a9127c633f5db4b122d29dd22ea1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.8c075f35.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30bCRA9TVsSAnZWagAAySYP/A4anxnVQN1goggonPrH\nJsl1aN6aY9XPjVB5L7PFTWFXICF34kE39ulZp6KkVjoCjHQx76SkZOrgzlJy\no1QAnHKSLgY3SluQFEZXrA5+fmwQPaINfMjYWDimLHskFgxxH6xXML7exibg\nGKY812jGVbysmsedD2axGA0Q0IwmlFmNacR3V8Oz6XCvCRBAq85eOypsZiV+\nZwBoPcwf7fSHlgKAZTxvbqdAd/YtsVcv6dD6rth1h8ZQk7npbUGRnW38CLNV\n6ufTqFgiIKRgE+aWuRcc8MbVtUiETiVMF/52jOm92KDGn2AQrsPWKdJMMJvB\nZ4N83XomOl979ZtJep3A4vrziXW0qDrR0iUlT42bKVC/gvkCbhVV1o6DEaLf\npdRdFqUmMEY9ALd4g3+RHNC/wj7HwnFFptPCFrWdLGS/ggLuYnmoD1X5l9LY\nHWzBSS9n+NkRI5r2+NNUpHNIIZ9f0g45bos8ls4vzdUd3mrg6zEyk2ILx8n+\nL/QW0iihcvP3pOoWGKVhtFFDIuR5UsmPQgj3ZgzMqgaFuT7oguMPUYl0/+Tc\n2pnEBzvVBmLgd5s2xpaEUtw01jG886XXAHQB316rRhLE50tGEKoxfoHTqva2\n0cw1of7r9ch3hP05+y79ttmUVzQ8spK1ZKWQ5UhdLbXbywkAd+WJhp6lgwbl\nx7Pk\r\n=iJGC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHx77wQ7Ng8JkPljkbVzFl3ykFN+Er3RxG4vSohjQRnAIhAIKoZexLc/7IOpF7TvQ9xQwcM6MDuGVUPrLfFQdDOOcK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.8c075f35.0_1610579226988_0.3184330944498581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.3cda381b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-ripple":"0.21.0-canary.3cda381b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Dzb4VSFbc6cjQ6LMXPefQJIX1lBzqlFyXBhtIqezh8NWkMbsMlZrcWbMEoiSCTWWQVQJZjryo58Si/nJhxLCiA==","shasum":"f6b9c95e4915a654a4ebec190aa37d81f188aa7b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.3cda381b.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qTCRA9TVsSAnZWagAApvsP/0ezaSKFctRYaQIqAhWt\ndzU+czjCrTmHp2hLgUDnvEgddXBUlCKjgQSeGZo2J6/++jdhcxZofTOCAQrN\naRsGVJ5FZ+aSt3YLfWAXJQPdMUxmY4XNb7Gl3xCDn7orWFmZquqkKh0BcVz2\niyWRfjR8hOO3Jk5MZBZtBxGlnpcjigMJuuFPOXXGueMr1rQg6ZkO+q4b9bnx\nt4KuPff3qtPLEUzaxglTujNBtjjtjzCGecvwCxLaxWcv8hK81nk9KQ2HubU0\nJsk4BVwMBVzauQvo56lgm9eou2yAFz8A6O+c8q2SEstODJRWqzpTd8w5ZpEv\nLo1MxXrZVLhaBZkygzxDp0mgHfunbafqbwbzW5fzir1DwpAukpxbZsxOGWGv\nX79g5bR8ciMyC5X/K3mJkLm1s6DZWpP+Z+ZDQ8Lj5InR/eWV9uv+BagK+Ft4\nzm4N7gvB0PQsBGL6ipbEntmtsRheQ+cmluGJ2B+sFN1CgPZpwIah4Ls6laQi\nkst9+VS84YgG/suctq5DnsgLmWr5/0e1AcAriIHcXmWXLuurmzSng5tCxSnJ\np8+SJtKIBF6ilXDOcO4NyQr9Z6xgjVy+DMscvIjiaqkYW/mSWYx/VR2jD5Kp\nEihGv2Fwf+05Zn46hQoNNSmgxUuapfGgd6ierV1qSopg1bpFHI2WCpc0LdH3\nkAb1\r\n=n7Jv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfuHi3sNUoPlwA4kzAV3A3MK/u/ym8/TxE1wYm2AjJBQIhAKXLmQ72efsjlcu9bmAUwunyScRpUAMQ2+92gWZoyX66"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.3cda381b.0_1610582675392_0.30788349054712794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.bc113605.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-ripple":"0.21.0-canary.bc113605.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-O9slaHLmDW253w7jbMjA2aYEXK09GJPm1uv0bI5S2Fi7/Zp04Pvg8vlVFJ/WGr5U9BBM/ja8zKwWdlVnxgUDlA==","shasum":"149968e6dc953bb2baee0e4ffb26bd1b4cacf94e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.bc113605.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QdCRA9TVsSAnZWagAAnIAP/Rr1R0qQ6GJtIYlGUVBK\nddxXsEAC8NIiNOTRs/UEsdmeSUfjYGCRVtRo9pATiayfQn1npC43bpDLBpxn\nTgyjSqhaXKSHGrws7ncyz6lNllgXeH6IOquugBD5jcaVL/c9DkLeVe4DMFKC\nOWTyACsgiUxsKd9qAgHFXpVOnWZMIFvRijpBJvX///skhQPFnA6kNLpeOzTS\nCi94RDhQiivk33FxQxu+0ymXp/QFX8s6w3mP90cy7nAHkeT5W4wCnAp0QaYA\nEmgZSzi7YIx3e02mAYMSRwUWJ1D4XECIkQg+uTm0lr2KBN2OmE2Z+bZzdkNH\nXJbDqmQwtZFOWxrl1Yh90LBW2hniDeAAFkImYZeKCfp6Rnllr2EhBDBJMD5/\nPZgozL1UnsPUDDWFpl4ETNBLTJFB2RwN13F04Bm0goAqZmS1Jx1mlS3s1inB\nCfB3ok7oZWvyjM2j0yEVGGjFoIpzDhwT2C/7OnySVDINz7GT/LTE6nXivPnc\nz4MDzymSYZZmlunFK+wIhUhXig910OtectMCan/vJlj9KRK6CsKusf/3zseq\nvVXbgrliW/Lv32NoQe+F7aVJ7ssZKyo+Fuf1rUVppXO9UpWnnGEinktoR/KN\nm3d3by5KbjGnyJo/U4dk6GFypiCJB+KTcIxrC71BxR5eI2bLR8UBSksiEzoA\nevgD\r\n=mtqO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcrW0NYdCLAe0DUmyK0vq1HUWlGQium9A0UxvqOWwGUAiEA1p5JgEzwk7Z9v7U/PYZ7ULjDMsuM3syThMM3Gv2TGGw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.bc113605.0_1610585117342_0.1677787814868621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-ripple":"0.21.0-canary.0c1d6ff9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-zKeXa3Hs1IGKmCmo/ajcIff0yjmJGEWHyTpNDi3qocJzUmea+EIvSywwG9MJwUjrIwI+7a576mQOEU9xqlYPdQ==","shasum":"a15f737bf9fff4b84212ab492d9bb242f6c279b9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZvCRA9TVsSAnZWagAANoIP/RYL/JNPeTYsfm9q8Lkc\nytUFGRydkAcXOy7EWUfdyLaP0o3M9bN3MhOKwh42hC6sB66DTda26OEx53BZ\nb9evPWd8/R+G8aZBFKcjLLjvPTn2qYiE7MK+8wKHbPqA0A64Sgi9bI3Ukqc3\nac3eG/iE7nfXWv8DJEjqqXJujHAilUttAjYIwE0eirYZTtRh0IikB6cJ9qPE\nm5UMANde9CuuQwJ0FCm0w8ZMdvnAWBZRa0haHvrsiKr0f/k/cWWXi4rWpUeT\nOs3J0uwHbHyICBSh4xEd2NFfRsjlwriJ6JM2xK54tPLU4yD2cYIuprlj3ohs\nOM3YWfFsbT43ty+MOGVCrBJ/XJThrlaSV+jXUUz/wKuSjloOCjU7LowYLOKO\nvCb1tcRcAQlTxUvTnUq6CrnsnHyIc8qKzX9F0dwNpSakBIhV3jEPTbFT8FVT\nrEtRoWy/keyn+42iXe28X2RfBuTF0MZQ0xzzioz/cKo/gGatVfqoTJlKOaRz\nmT2INApnWnQ7objVjYdzh4oobLRODyhUQqvzz2oSspTEmgWB4TV+iTMgZmCA\nBIpCVxdUkgTiGDDuDeHHOAjVhax/SLUZscMXW/i4ZHlp4JZZh48uFGGYwAPo\nsqVECfYd9DVM+fnK9/gbd8H3Kr+6p55ZxwaIf/FRPxdMt+Z9SLhYuzsNaQV/\nDhZQ\r\n=yjnX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdV+P+PpmUeUy7ok0QVPPuTTF4hOc0YXXr6owPAEAd3AiEApESVdoGSA5S54dA1ub/hXZlfo/SVKdjCaNa3g4O+5Ls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0c1d6ff9.0_1610741358934_0.0294038803937271"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b4332e00.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-ripple":"0.21.0-canary.b4332e00.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-7f2e8tmTMLkOr7pPF58iVegN0VfZ/21CzdHT7UfLNhAjSck1KbK4zXKrmPkNLUiBT2LUd6sw8ddLQxzL/93l7w==","shasum":"014b461149073edabb4bb9659ea7c8131435d5e5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b4332e00.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIiCRA9TVsSAnZWagAA9R8P/0j67fAxVGuv3/lv2WIT\nrUxHW9uP2r80KBJDm1/1t1mxi5IxdEOEIj6u3wfKzXw7gpC072CB3qApmhQN\nfObwRz1WTRonRpoYS05TWkrjaaMkAkHi8QfKAQAcpt+pAaKWMZ+NJIBb7fyA\nmOpgObsvosySiRZZb+/GK9hv+rYkkVOUXBBFZIt2rIbAslsU4yOFL/MAH+tq\nGv7zzzCKGymjT7JlFA9KXr9nvzYN8PXzhGFSgcnf9NkgJrtXjhTsJXFmCjqr\nulP6ZFZxLwh5Uk1zH/cvYbz8J4Il2eYOxu0Bj65Wx6K1LrHcVhsDlt7Ac/qS\nXE8CxUohG9BNui6ZxZC3YBX8UtKVp5wCaxPAqetG5Si0x+pqYg3N/CI5xSXc\nnQyfTsW7wMywP8XojBYc2LRB5bEdzXLWoz4swhukfBGgYm3dmIWX/AyjLA/F\n+jyLHyZIRknKn9EYg84jw9bvRooUV/QD6cCcMwsjyMWLh5e2aK9CPy3g8wdg\nx8sxl3XVWF0kf7D4Z8yOfl3Ivyk5Pxwp6YepDomlrGY08TmnSWgDQ25kYF7p\no5tORZjtws13CmU81VhJUrdAedYq+CtKZDRmLK1zLiOndEnSjB9EZ7EHpg1f\nldFRiJ1kSIjCX65LmMNhONlUfxX4Kko1cbDpNkFhebY5fkHyvs8xwI53mSuc\nneV2\r\n=Adi9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+zwBrVopTdTyWCTOBuHluqA9oNTGdNiyRdw6heeYXCAiB6tMGIWsGVwF/ih1Ji1hTE+/hlwuf8v536zfUjxP2GcA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b4332e00.0_1610748449953_0.7026404699469853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.2899691d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-ripple":"0.21.0-canary.2899691d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-c9N/c/P7OKU/9i/gD2oYFGitdcq/tXmJjqLS7dCUo122M+Z/Trq4Z0eAwqgOPRyfB6J4SvUuJl80ko61/WwDtA==","shasum":"76aea0921d242862c15f046e0042a520b1e79fe5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.2899691d.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUDCRA9TVsSAnZWagAAtJYP/A0MPbTDA1WCNGiXxaSe\nI87QK28yGFu7UBSk0YfipjwBxlwrNlE9+xT6iSzmml20yW83cfv956l6gd1+\ntPW+3hVH2VqIjJuIzPSlSO/z019nZcNnxsi7VGVi3pCLN7QEw/viNEDk9t3U\n/rXlImvdPc2+QyGFVt40fZxj9syVtvcqttbieeNvh0e7X2vPwj/sH7BuCfoF\n98SBA09BcK2d4N95yEn4JBtKfKZsElgBmvyrMcC7DE/jRvZWs/eW3mqK2q3p\nOKQAFZjLrSZ61KooPeavhR9NHvUztiu1wXRoTvLne/Md1iI827DeGwm0+z4O\ngWuOs7IR56m9Mv08EZNKzEKgtSWy3Qnth6CxF3v3585XXqKynbWjpDEkQzyo\n0f1lnHF5m/EcuTlvQ53xbVqDjsD5U7iRGf8jruF1gaQ420MdhYkiuYEzF2W9\nFc0CxLlHzqfKobiSr/YgS3pabFUrBuqxtGoBfga6krNqILVdoSjuVI6BnAGh\nJcetgsVcSm4qAPlKSxPRwnxbh/DHpj2kJmzQvqVxryuaV10FvxzykPV3L/pb\n6kiFAPMLTFyBSWExHOdqy72CzJMVHDymCWg7Vm7u3k1HiMh0LelLnniGZAPk\nncqO6p6dyh85yZX51n0EK28vKabYeDRdtlHiPKZcYKjwmOHs2WVB9MSy5bV8\n3YmC\r\n=Y4QG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5V5I0GgpPkOaRVYNHD//3P5H1HGERq8IkV7lmrDAf5AiBf0CmvpVn7drC8g64w+Q/G/VFjWnlN3Aw4PMnRYr8Owg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.2899691d.0_1610761474624_0.3015615914898808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.fe73953b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-ripple":"0.21.0-canary.fe73953b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-qVLmBrNYdRTSELTomM3UWNTH74E6o8XZlzpfvxvNe1NcBYSP6hNeIvK/POwVjivQgTcaLcSATOz5HusfyGkh1A==","shasum":"00498b81c5b80ba9bb7b9651ff861c353096e6df","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.fe73953b.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEzCRA9TVsSAnZWagAAw/EP/1NfqTSwvGYfE5Irplxo\nOeWeWi1xeFPPDmQ4OkghxfqqeDFIiJE6v8aBDgiV22/DbWyz1aS0s2GBZ3FR\n3Q5EDiqBNaJ6rv68RjrWlU/e6vEhiI8ldHuMcBLWFgKr4U8wWq9q60waF3nk\nHKoHyAzQTGc1Z5AVpaWXHRqYlu8KzVW97gWUcHfQkkxhBl+4YbuOyW8hC2ch\nxrRaAhJ3asiC9w1d0pt7mHC48z3xpdlU8O9KVJabw5oSUfRHnZx8U7EhX/ri\nu2wivGIpIAbAFk9RGxfdQx6xqnQV/94lA3J69t4qFKtrk0AELimJtrhHSmWC\ng89trun3A0P5S0NZkvo1dC0RrxxVoiQo/vZ7oRSd/Jznz3a84EYqe8OHExbd\nDn90XRMKST6kq9jFBCzxVAEIPdsh3XDFN6rJy+yT0FjwUGluA1HuA5svUBcB\nzQFAf/CNUWc/mv3DFNHoDrjXPxS1oRMf28cxopSJSqgjJdrdnsa48HCKQ9oD\ntWmu2nYh0XNyRpwnBEEN/LgwCAB2Ni27iIb7OSVNUaYE4f2v6XKc2QebUe/6\nFPCgCVFGUkFeCW6FAlqMqMHtwUOZ/yH45yO3aGRcWPUy7F3FaoBb3z2jvEtr\nWNN7LI6+gC3EvAMT823NE7+VKwfvYzhN8VdxY0tOjUBGwnS1Y0e7BYoeeEBk\n7Ift\r\n=SXCe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEs9/l6H4kGpgQEGFH7zKX5GJk8UEp19hcb25ppQewqAIgSyIc37C/0yles29hLSr9Fd/+U0dO1rfCd4X2wpt4PW0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.fe73953b.0_1611084082784_0.1074002690291922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.d3a16455.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-ripple":"0.21.0-canary.d3a16455.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-rOtCYzS+GO9jzn7ZDgi/g4oiKQkHR5XTsnsyjmCxmepoPOWvQe/HDRdyTU0EqSIJw7NQLdTa2iKWBn3lae1ppA==","shasum":"5d8357bc181c1983d28373c71d69eb284a3439f2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.d3a16455.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzh1CRA9TVsSAnZWagAAhWgP/iianEYOe+bQGn11VjRc\n86pIqTuGjOtzi+kGy2RnndN0s/7bW0vrGCXsWYpHO4CkVTAnGvSW/q8JhmNM\nXpYXO0J/NgJSE5k/wM0tekYZpKQXvwmi+i25EkdyI3J9pQSlMTmBR0JqD0mD\nFzsz+Zo/HzkMkeQUmaQzrnOY3a7r9TGi629dkXNH87arHRrLkCVAwe1hUaDS\nwgj64WNJMOa1q9VhpOgqFeFB4u1A6+Bma1exdTHmRyBSy+tap6sLVJFn0o4X\nkttPdfBY1cNwN9aI5MQsZ2k+wj7YNd0bK1wBRLHfYM+6qTJtZsyCJNpRm62n\nFmMGvSrMez06Y1J57G4VUzy/khna2X8N+lVpPGsETnxMNpqArQ3LuSiltvT3\n+lmvLDF8SDm0kHcZBV1BNq0s0GxK+yEFcSwxXS5iYfQACCX5RP1KfUhGSWnL\n3+7+TagKgnEow46i9sVAlmfPXH78in0UkUp9D7cCajFIZVTCJBFx5o98fQ33\nqXE/H9751E5ttm/hGLd4/k+5Edq5qjjwLqgmaZ0Qj0gDUxc5WBxhxlgXKa1A\nIHZqFWQuvcuMBmbdeG9XQJtY+nMCvOD/9CiehdcFZRF0q4gvvroyKWSqHVpr\niydEJIwxdSJYUsDgq6+ziWm/5V2gqHFiW0UNT3U1PdXo5vL0+m9diZkGCzsz\nsxen\r\n=GyB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbdBDbDRQOusxXMhCY4M3NUIsmCQfxouS2adaQ2BVLCwIhAPy40C1pZ36WIRfxCyBbhx573+MzF9VHxHpbFjzWpMGR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.d3a16455.0_1611085941002_0.4022516916183052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.597ca1b6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-ripple":"0.21.0-canary.597ca1b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-bYVxDVLsEjCAz2Etl0pBATRiUwt966ltv5IFnzyS+H3HMZg1Ggve0L/F81MpHqNPzrrsjBUQGFexV/a5ooMWRA==","shasum":"da0c4430b3e74f5b2dd42eef0dae18d914483b71","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.597ca1b6.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CECRA9TVsSAnZWagAAwRcQAIo+9vPYx6xQAe70mnef\ns67KUKLtRx1ELWrJeRD2BOZbrM9FAn/eJLpX8m9JBiBfXWMR6hdU3VJyZh67\nZvJuzvR0XcU7rkFajaTzOahHh4fZF9IDqZ8nd1RYDPJ720LG+B+VFWTN5W4K\ng2HZWZ8w+Jm4PKOKUpYJJChQ8kpddIosoE9nIzgF3bGiOmi3fEQRNpoS6Ajy\n/9JQRnJrjcrgJZlIl2lHTmcni8GVrq+H0/jTJUf1PPADRNiADSTviemqmv5K\ncWrY2p+So6gUCqql9QfuPl533yjY1mIMlxm1A2juTcKV5a/5A2gnEd45htZM\np6iIxmZHidM22JuAq8HLTid+mjwgeG6XY1X7I4FODpnT06OjDKEoiCfZLbEL\n2HNzfgGRSZso6wTuCT+t4ir5yXrUwE+ruvQ7w5m13DaQsR0BBE4+5Jh3xZbP\nXNcXd/G5jEW+8OYxUTh0VGDCOJ+s3V1Gmkr/ZKDT3NznUTJ9vnUzvbXp6qVt\nWHsyMjJSmZQQ4cs2oK9a+lHb7Q65qfvj7fgD8mFps8oBm79r/OdF5uzQcqWj\no8fNU0f1sYtBRwBMt0D9fOiPlTxWsfbqSpu0hB2JOlxcuxatDFAwqLE/98n9\nbmdgOK7sfM7AadfG/kfWncTrDf8oMbGDRn5ZzuGJVB2t+8S5FLxu4Pd2HGSN\nRXdc\r\n=WZV1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2Rm+VXTLNG01IJoicN+eR33pOcZVA/Xnrev00o8sNmAIhAIeZJXGPt2g32rtGUWC0XH/5PTp2n8TiBjQkJh88wtou"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.597ca1b6.0_1611104388293_0.5552878412663822"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.3c195efe.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-ripple":"0.21.0-canary.3c195efe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-6xg2wdQ3DE6fO2MeCApS/T/vbhYWGC38XXyPgumgfyWZpPNXaU0RvrOtj6h0Tl64aM3CjoI4DO+MtkNzqs5O/Q==","shasum":"de32a2f30b82d21e0b1dac55c7931d727530c70e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.3c195efe.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB475CRA9TVsSAnZWagAALeMP/3TDRuDcnSrzR3Q8Ukeo\nYaG2xpaazBGOAeZLRGz7nOFCkxbnKPhD1LDa3GxmAEtiH5bLPok3Caos++Ws\nvRdBPxUrwZVy+nlHf8DU8qwehvjHwZy3ytyzFe7QVB587DsBysV2WajiZBeP\nyHLIH/OfzwbbCv8L2VPTrEq4ekve+K7Gs5uD44fATPaCKHggGsbEvpuYrX+a\nv3jGAuwh61Ivg3n7O1ClVRR5ljK10BCLiBCet8Zus7u+Sp96TBs5MQSUwhc0\nYPbkj80mklcVF5HMcbZ4pjJ3HNl/4DIE4U880MYLyOmwIhB1R3xAkrlbvZfN\nKYAPy7VViCnq6FCnzVBY8FSoXvqMmbovz0jUHG7ibFb1FljaBfqfxVRVvGRs\n3qEIQEOd1yromIah0ZlIW+8LP8VbCIMSF0c+/3ZTMLWvWeFTUnGp8tQMLKDa\nfwwu2JuTAwHrHERSpPvIinQMApwGuoSfLvDpw022gtlGnC20xIAnUTgtDTUB\nNxu2hFcR/E6OSKxrDr6aIW5mNmfJVRc7Nxb7I/Emn5GivpCFoLkmlwagtONK\nTpPoW9RpybAu+I0dJTvlIqi9WWMN9i8ysXH2sLqSd2uGSz66X+m5f2nzwGgX\nw9LDpMmUhoEPRfThWEIgLkRYsUFdpUUloZEFndcQhLNRKkTXJCbVnb1xMd9q\n2smx\r\n=UVdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjuRXI7MZj9Yq9DTVJbcoXblMWHYIFtRH5PsC/RsnpQAiAqUWs2QhwrSAyc1kPOHVBJJ5Qnaqh8iP1LH/70VT4Nnw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.3c195efe.0_1611108088909_0.28557175402077695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.f7b8755f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-ripple":"0.21.0-canary.f7b8755f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jhfI1/Ttk/K6fOx74YO/q+Yg2P/hqjKce4YnDfVsVntigB2l7CNm8+zEugwkamXb4hgbtpr9qOMwZZee+gxxtg==","shasum":"d19923dda82f0cbb8edab4e4c0d28e38b3f8d594","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.f7b8755f.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSVCRA9TVsSAnZWagAAJY8P/iSuyxOUothO399Yb3qS\nevTnWl6UIft5rqbGnGaf5Ew0T1SzSww0vV051Cmzu54D0i9VTAxDA98S74lR\nm+e2gqwzQA13lsXJMlipKMEDHZHbXGapKPyMTNxYcyyAfqi+N6Ov39u7cxTW\nPusKlMBmUeKPwMm2HgGOBy5p3k/NPrLc+KPp3mvRevhb3L4AbsWzPdDkjvCz\nWMynVcd0AthL7l73cAVSzQPcmnoJkfrMhQ9B7SE0vzVTQa5Q+5KZIBWLYwQK\nu6pD4ZtkVd4Ab1c9a+U8j6bxdEAN7MvWK+/5YcMAfrak0zqykd6ig2c5NSay\np9tXEZikEJ4JElZcdu8u9Qua5vgyOLYf1e+JNMJdchNjxeplM7XvZaxFI285\nIW3MBtX9zjVlYS2bW5Vgy/0GxtgHhQ85VXJnJF+NQBzqWg4eIO+6hkI0RMiz\nxjc0fDHygutj8bSVZBvpKhxWDzYkEvbX4J9WUpfecs78zG8r2xxFh7TFAoRo\nBeSJ4IDzqicRTZzEaqkEkXvg2QnQ1btsBrGi6lUN51tUX7lzU8lL9ZnyxEZ/\nC1P7vMbR6t9s5e0j/uJUpBGHtwFl6pUYqlzAnqYWVgqO2uQY9GyaT48aJZ82\nSLb4xsnkcocHD2tLjjKSXjy+sXJSUrr1JMwMFY7j/2XzLYarqKm6Bekh2tR8\nmqxp\r\n=ycpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEHBqVHQ6s2YF5Lo2AhxDNdXluomny7kyLpSe2Fm2TsAiAwiGe4brmRt7K9xCeJDnzrM3HOnfy6FNfA/a4lQt8GjA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.f7b8755f.0_1611175061484_0.969046525418962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.f60de7df.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-ripple":"0.21.0-canary.f60de7df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mMBWNIYLYp2QY6cIbFK7W0KfiC8ILDumTNe7MT4rmBvT7oIrmH2Ef7JwvOO6B2dCczA0aJWN2aeE6AoGBjtW+Q==","shasum":"a012e21ff79674fc03b0107ab9012fa40af2e45d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.f60de7df.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6JCRA9TVsSAnZWagAAyQoP+wQMtphc6o2ggkZjmvOr\nbK+0PYfSSxdx7DVUYhifYWuM4mu0OCUMptK1fQiSH4hcExzbHHmiiG3yCg13\nCJiyNzEVaQM2VvY/RwvhYHX1L26wWcCTdO/0zCOxsz8cbJFVgOhr/hS5+xFZ\nbc8RhdNi+l7RtdjzS3DV3V4Gk3/AoSFzojSGH/PFxi/2EeZJqzuxJm/pZ55s\nlZBWFpngPhB6DsdQuQatKLG2//w+eSeyp0qirB1oXm9PXftkt5OB+whCFQjc\ngHzy1v88grj5Im9W7YGEKrjD5x9Q3Q2RWSEJrJd2aOfEm7IokdlpLI6U0Oe7\naXSf1IBTTuWUfUQbvTS8jjJVDFR2mdEi+rPTT7ysP4xcKHrfN/0JglOqqi5u\nCa6bu1KxTcNe+HrzhgKocwIA5R9piDIMRAyEBFP3wvAoD+xf1BiaBt7oAjna\nwuJkC+Pq2MQRivmWnDSPHj8Shn76McLZ8+ygiPp04Kq/3s+pbDMZ8hPbZrqH\nJW2maSsGeasWnoUE3nTjP5HNMhG5P2icmDssIhZS/vqIiUFJZ5RnJncdTHLY\nroENP9TdAWANJMPkUaCPtrLqNVL+KVkjMhS8Oig4HoZRGqGOmpzcRPsG2Qc0\nzvz+CIa/6WWDR90P/LzIndjdIpSOuuSpJu8JshUVZHQDnsDg8+MilfErs8h6\no+W7\r\n=pRHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0tq7DefinPzHK9xExngd8TSWlxKQAYZDmlfz5Do1wbwIgBQGfrKYpiVpRzbugq0B8kYhOXIIlp1mzXklE//tCWBU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.f60de7df.0_1611185800726_0.9489913369806555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.664a2927.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-ripple":"0.21.0-canary.664a2927.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-T5PNvp5AxYJ0K18CJMW+xAcCosOkO8lHJpKFb11cbo9jP4hBccraG1oZn6SD3V+iyLHzUyKO3CGaWxd5dqJe+A==","shasum":"68a37a285c02c8862819ea5b33a877764e95f736","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.664a2927.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdONCRA9TVsSAnZWagAAWEsP/0e3y4p6I49vKjqqURgs\nmWKltHQtrBdedVLsAMqGVpZR4Enow8CdNOw6aE+fULPFGra2HCUATxR2juk9\nfQj/0pYZCK7tBK5Ufl7gjNUACRncf4LGShT6rFjLk40OwsCgg5S+gvBlxhqc\nKVL9W88r7QvNY6bq9DTkwKT2+RK2x4FSAHGWGQJA38EiH+UTODLI8kbbLGc4\nqYfv2SNCJ2i+1yezdmGhHYtOKUDHxXg5o1AhWMF52/fKFz/cumrU8PQ0rhCj\n13B6WPyyrBlOiuBCfAqatdvSWhE5dTFLif5pNbfHUS1X2jxA0ZA//0KBdH5C\nblCvOMxK7Td3TbsBPefFdOMzMqzp81REaCO1uX2y0Wji5GkjmzBVND+JcPlR\nek3+ZsF0GskANV/d2wbNrMVah2wiW0PoIIHPVWAW66z6G3BouAsrGTClF2tD\nGlYaaVAoWJe7nZOH5l/9PKCc0rO7ZhmsMyEdW0iOOZrgQBp+gOz+Z15iOU+a\nem6TrqxQ5FqAiGO31A3j2H+NqLL63RBRqX9QO23bY4reHKtaJV48VJiSw+gf\n0L8PYYdVMRL7y7eTwgceMzjnYlMEPOreuCW4fMs/zrIJlZLxs96RGN1sLu5c\nvLsW9EFUbZVdBY7VzvoMa7exB1eRvyUS+4ZqA7mu28H3mLfAMZCwoo/3oMWJ\np/iN\r\n=RyAF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfxeb21GCCl1ctRYoD+hABsjJN4GQyunQrCcz0H7FT/AiBxLU67L8bYxjrJ9NRasq/M2JhaUBLKbbYrkF04PfoQfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.664a2927.0_1611256716668_0.575504380509559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.a6d312e5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-ripple":"0.21.0-canary.a6d312e5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1ndt3uiNyW3FGd3otKUKLyt23U5ozqJdBGUDLKOVTjLQNVEhPNVYZED5UQNYQwADlxVz8nZ0Dyaq8sae9L7NmQ==","shasum":"7262ed21ceb84f0bdc1b31d671c13a456f29688f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.a6d312e5.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZ2CRA9TVsSAnZWagAAvuEP/jt+9Egg7jc/EF1tawU0\nDcs+Ipz13oWBKDF+MYGB18OX0C0VjGPmEm6/hVtXkpYYfW2DjJuLyGrXxvDP\nyrYIjuIne1eJy8ecsdgPrJJczenlT+Ka++hZZpMZIol0quSwdYVT1JRm/eIF\njk+Vs44n4X3F0AbLlTgTlN0QLSxFZ083YZnQsVVhhFDSVriV2OHtdiEy3fwe\n7YH4jNlS35bIy92jgz5smSk98YtspMoPZ8ZevzMvsivjegHgaYgF/dOz1cvw\nyhpD8uUT4Nnkuz8vOaSmDOLWUlbWh0pYfx27PU+OF/Y6z/62y7ItAY0JGxO3\nBL2koupmfO55IG7MOMxFhXLRjyy52cXyYotOuv/LO5b4W6272M5uIp0VGz0I\nrfAhu+CQtprn/8YkbUnov5rHajk1nJfwfjM33qn69oFgZJ6AwgnWCXJTWFrb\n7lDtFa03OdepazxCWy36lU4SFpCcOr2g7AgF0ugtXcaDKLM1jJAxfdjWd6Ng\nyUrgCFXI6WTnoERvHtQn/3O7r+7L3ilztlo4fdoafFTbRiq8mGyOKA0mQ5Nd\nWZONlyZCPnliZ+OeVSNiEG9AeT3vdAe5yABDNpLT34qO8Xaa5ydKxQi6t//C\nVHJnqQAqhYJQDyCWDlsCpWHII/l+ySiY8OsfXxsMbGRrjHyPF6oNBZAQOfbC\nRRAe\r\n=k4DA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDESu/H6HaKoXBCv1GoAIzM8W3jHLtnrAVUOS3DayfLsgIhAICo2PyrWtp3GLYVAOOpu1QJJR2a14qUCXSeHZs8BDo9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.a6d312e5.0_1611265654510_0.4048965057992362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.027365eb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-ripple":"0.21.0-canary.027365eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FIkk/ex/Z5TPWpg+rMpcdmWrdcCXWwz7uaTMrHiR78nPL6oq90+eufDtlbmooC+M0zA8DSMuQ/59LnSB7QDElQ==","shasum":"927ff4a1ff224964293232eca272e11c0beacf08","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.027365eb.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6SCRA9TVsSAnZWagAAx0EP/1PJDKW60zCtcEeuO/Ha\n4IdxNBadufWZACG6UjjoWo6Rn6ghEz5OSNkJuXAaqGlXiT8GkZAlRKw0GgjX\ndKiTLlVaWy63eZUbFP52D7pTisbZtDD3JH63z8EgS2evMDIPC1ej0gO/4KUZ\nSHyf0yvnujLnaVD6d2no6Ui+hSIQtB4pHxShq31uIFthiLdc3W18m0IMS8p6\nJMETjTZSI73ic28tX7SKMTOc+816gxhEO1EJuJDnrWpLxx8lxSedBTBsTvjU\nrthuxnuYWgRb0B9giwNHe/2h5rhCXjsnGFcJpvJy+shjwwf1PQVjI15AQ16f\nNdZ3KoozHU50F7BmTT/SCBrAaTJrwucq8T9Jo9cZ5PON53grZ3dD5gVPbUqE\noPID1gGFJrhGhgYb4Kv9cZ+if/AfP43H8+H6+9NtTR3ruE43lX71ZgBx3jRS\ncJrvvmMuB86BYGDpvP+owDKpQW/PksNfsGOsgTiVKLvhm0PrM5sT2P3U37FI\nejNhcutv78NQ3c0ucBIOB04u1FC2qz+qfaDJRTh6RKphkDNTSm7DykPj1yfU\n0BX8kE963+3JoEum4QicjKjf5TSLcLVliZIZXyqxtWGA+wgYveXV+K/6yx46\n2siP6ZeDHKzyjhMtGyVCCTfK5mWvNvP+ixtUGqC+cvmKhBwHqxR/7LDOdOFS\n9EO0\r\n=UiF/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICx7m8f3o5Va6LCxoKirYPx9/iC7tYLvMZLvbm+kW1agAiBke7hSOuen6PLgIngHGrqLs4JpdlYMvfi+xeRERw5mWQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.027365eb.0_1611349649680_0.7723728987475533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.7e72b66d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-ripple":"0.21.0-canary.7e72b66d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-056OWjv8WySwdJNwjznsWTuVBQZEgLX9Rd1Md3bb+nmlbSybh7E7zELXuEnFIqrcXoMJ7lprSdYj/Oh/pq8VSQ==","shasum":"00b489c5a6a916f5146fd5c8635ef5da6f183336","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.7e72b66d.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18lCRA9TVsSAnZWagAAl3MP/1yT5cYKHCPrTN8S5PpF\nUivgz2tJDu938hMCyd4ak3LRSsWG/+io5qE9XBU6OYx5NwrYaHFWmbGz4Ka8\ncsi9BPgu8E/zhxiuiU9bT8bm1vYBq0h1SJtB4F4MBnwihNSzzyKo2Lx6UoWQ\n9v0HqPTY/ndElgIxf43xqFyOdFaLmOMIt6Fb2mEvQSLyOVyeMrgSQUbrPCIN\nNMVZpSxArtSqBMGv4LgjKlCzYCW/L6Ecwb0j1h3lMP2oS5EZDFMkYI/I0zHo\nK34/7+O5XcyUDO/Lx6xgti7B6HH0Y7A40SzTDF+UmFJ8Rq3ubysNHmGL3lYZ\nSnee5Css0vBnks4tPWcdUMAIh7tdGxs5toIYVi30KBdiYIHDRYyBShuXA2uA\nhf3sNS4h/oT5HrmFzVJkso1AR3wHsJPHadNVUFDwPQQRXCFtcrmtSfeFnlQG\n5ohRCQi1AJPlQTPXsfqCmcEOJKiffkFDWP7m1eCutnK7qw/YxLKkl0eOirds\nKzQWWYdNKjFMXz+BPEXoir/CUPYzin1SDUzSwT1GsCqRzGFXTnzYMsuP6H/G\nfEym3vzZ/Pdm4M4mASlaFGjM+OB84DZl01vVdFVdWZ9QDaQxBpzkrZ2NlMxY\nkiOIt3HFNOVf7FB8cAGQFXfLymRD9MEXNFxjDRDDSNal6rf16Iv19KCEkSDZ\nXhiT\r\n=iqO3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClzC1s6SVizsruQQNW5nowkXvUkIVh0q1xGRgGGHwqrgIgL9BfP7oFXlo83nNYSS5TJpVAQ7llosSpxPFPuMV/MY4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.7e72b66d.0_1611357988743_0.8899181712379018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-ripple":"0.21.0-canary.a6d6a1e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3XEY4xPe68+XckxiKnwl30DXkoHIB5yLKNZPTnOB6we5rWSzXQ90pyL8cMag1mG1HdJqdRfPKk008CrFiLVufw==","shasum":"c225890d25cd5497e733600b5dd6a20be9f7140f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CjCRA9TVsSAnZWagAA5m8QAKEPYeCIEAOOogS4NuyG\nBGJOuZvxUtW3spuZYhxrGyCoD04YdwHIiZlXdp7r8qceRBNk3SuzklmjyJNi\nok4t6CmR8XlT25hIAqSVRjwwe0DaDOwDkcRkHHU3QaqVmTGiHlD4z0aq6kcc\n4wGirX2JFSCJJAm+qLrqLFq++/ohAuHcsMgW7X5ZgTxoehBkzwBVZxVflu6s\nMs/JNcHMtmax8UMXkLGpTLWrKwcQ+mUdILVS0s40rRkbaBjegkI4X1A52RTw\n58y6VOR44NT/rCWMPudzNqo6/91HyE6afdeOnUoyAVZ3kVkzsvdXjNYvrTD+\nedPYwp2+9jcnIN9PN3iLt6f+U437KEKNdvZJlAbZQGj3ykAjR6KY96P/Op/p\nlIXwPBmSonMjnFqbZwXBN/YAAjbhO5Ulw4Jt0JnuhBvphtcLu15WzDcV8be7\niGaeoO8Q5Es2UAOGW53eqfF7vUOez5TWyn83x7RZgZ+ivmn9lrl0GLIRlI4F\nYtS6UZU0e1qyaJXU3EkgpCh+Mp4a7HMhubF6UXGs6jnxvACuGSEkvLAE/9YN\nyg2Cx4p8vt8NHTL3iq8nomlDeUX6l9b/VanifCU9EqMLUNd9XOGkF2w9HCFU\nCj/u+4/wKn2ub9csFqmP/KawAi4rhEz5NVBvZqgdWgmvQIQIPsmGajPpL47M\nDNx1\r\n=ZBa4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZFbxsJBaOUmUBz7lpdQJkATDv4E18OG1D2aBfDCOJ+AiEAm2u3tdb5eBx7gVSIX41Ma4x/z/HQb0c4GwMO1HmVQwA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.a6d6a1e7.0_1611358371309_0.48286952360541147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b95fe100.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-ripple":"0.21.0-canary.b95fe100.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EQ8V32T0k5cFAS++rBuEsg/8kf5ofio5AQMDq3kRvWxHOOz+BHYtHJrdqKFvGRe7mfEuKPmda4gESx0ugPb1Ow==","shasum":"5adfb6e9973a8a326c6f40305522f628c5236e55","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b95fe100.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UcCRA9TVsSAnZWagAAZ98P+wYgeuRl9fF2BgkLz1fb\nyo7druWHB17fuQYdXhQQbVcczzqgEIPNPPItowl9XO2id3sJUU1IEyh8lWAW\nv1LqIvlMyCfVz5sIBzj/vCcJQp3VZBiIJfgqZwDw8zwH1vHVnZ75UIbTNlTm\ng1BERVls/cm6FARxp/M93KoHyjmsMPcoKeyMNZ8Dq7LO6QuCZ4EUQjMC2BnQ\nt+ua/2FFvpbsYijxymKQAgvMraPFSfCC66+CeSpMVGV/lLSsYHx3X8/5Gt9o\nje4dF29bbDpFGflyBMd99hCjvIV8XnqmflNPmL46K9wWZMZGCXmZh5ZNm8xu\nWBAVqnM86DscWyLbaWfQltFuJFdd1Dr9KFOIjeRGLCYxOvJBFttRB6IjDePG\negdVgdAWgEu0Q5m3cTYtzhMJJBRVL1z2wr66g1R56CigjOJAOv+3hnA0Yn/E\nz+DJUvMp9luvRpOe9g1rSkIUa/g7/0fSTjqlwLeGUlpUCVeDkthXX2hIsh/E\nbft8froy35dbXOdR3UESPQboP8HlxKt3cdGiaIPuPEJOJP5jTQWHeoV86Lu8\nMdffjYY9Z+BL7kBU1bWFfbht0wFV0Uma+uLrRopaqlBu0HR50bPaVA2qWtbE\nwYqseoS0rLDsFaqWi2BWJWcmGG4tKKYfJ7KebafeuIsXcFVO19+GboDUuHls\nH81q\r\n=Jkrb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFO/pT1Xj10cFauJQmI92/XAR4+AgsPhGdctNN6mFJX/AiAZZUYPPdXHBS7s4cDZNu+rLwGcNHKQgE3W3KW4dKb7Aw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b95fe100.0_1611359515979_0.8824934257407948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.c8797192.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-ripple":"0.21.0-canary.c8797192.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UI6U3D5KDWnZCXSjfS16XHwqwcq7x+W62IK5Gs+yMcxQPwvxUAW7kCIQn/oiEzVEpOWYZbsMIL6QbYVrVRgI/w==","shasum":"dc54c4acd365ee9fc9c98cf5f68dfb8adfb7cf51","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.c8797192.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2i3CRA9TVsSAnZWagAAQLAQAI79OaGbnsHrpEfHrcTh\nJVnNfEI6lYJGrIKJBQZ7g2bZT8ERoi4xoxH/JaegbWT/qxnNQCTdmnDUekp5\n0GsQFp1O++bD4Gl+lZ7js7H3xUPJX0N5LxYX973z9ih8iWAtQm8gYYvqlsxM\newxOk2ndZExEH9hnTVQq4/PTFyvoxi+wPoYklS8r+WbnDRXh6BFhOdgq/h2D\nSoQwKAnuGPApu/nf2pkdSXd+ibrxj/902xRBFpZ44TM92nIbteqg36Qio8Vx\nEkxD8ZNESIeqpYfV+SNlKLZVKOI5QvcHSqBYsOH1giXli1lqxxy3u6Il+3Fa\nj1GasB9s3w98Y01QdTheX9S4kKfHabDFlktriTWrbvIob3q9ngCRSviEV5U2\ngUjMJp8cdsFl1nBAfJFftFjo5SLT74ugXhwhVPAm7kxckD4HnSER45fiBzMN\nt+Xxve2BVnCxgOVujYGIWAKsbZm/h2ATF9pmM/UE/I7Fk0P3NVPrq4nEZFGI\ny9cYk7edegkZsiLMZIivqZaxoH8OvzoJak99DDSZ96qqqmsFkSZar87b2C/8\nind9Mhlkbny8+1AIzc9R7XS+n5a4N2q+6Zhof1Rvt0yBi5dg8oVq78I/IkjI\n4P6UF3E9xaN5lAjCZ1IT9uNZqobPIh0uPu0TJjrfnvSBccKrIY2IcBjlUPB3\ngHow\r\n=vjEf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNX0309drz43KXlQCNVcd047EtMb8jCPJ08t4SIoZ+5QIhAMIPEV2g2kwoNh7plDBhISJ+V6FV/2vjOv0hVWnlHFdB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.c8797192.0_1611360439547_0.35076033377773297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.946f5563.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-ripple":"0.21.0-canary.946f5563.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ce8H7UqeHnXHM/3uy2ZKV15kbP/yGlnmXZIMQR7AlOGUW38nIT7OzPRxgnRr1DkVI2472A0HbsnxEnHadpQ4gQ==","shasum":"43608981afa454160e604c5cce506fa49e8403ca","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.946f5563.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3E4CRA9TVsSAnZWagAA+SgQAIhYJ2H7H9QeTHh0D9Kl\nX26vKwoZ4xnxUbULDbeN9kxMg5sbRkb3pBQdq/k792fCiIqDP8RWzqJfhNnK\nwHubOChDVeUNCOapK/bfWcUG7sdZfN1jATdNW6v3QD7uTFJwlPvuLVHSgSKg\npM2RK5UFqJF5k/GeausZX226KGfU/X2WKkFJXKN1xRCw+7TX2XA4+BLOjQ2o\nJ0A0Kl+82pEDZ1mRMJpGnlraFhqQwJuD1rGdrthoLal+2KlF4ocdYYqlcQ5/\nyUTIcEhYX8Bo9QT0vl2v3RqvhSuTc/Ww9VWscqwY6XjjmDTsWdQ363rk4pIx\nF2w6g7MLgbg5OmhYEoQn21Boh2Lnu1X8NoQqMalcnlFoLvZhK7WJOksR5ie0\nE70u2Am3LmdBthB/uyKzWI6RdYv/Gu3gVnSnj5Q5bMvuGv37Qs3iOqX+TC2R\nj3nYoede7dqLVLlVrSDtoFiA1KxKuiJFP49AB/+0URJ15k+ZJM7BS6jxtERS\n+3E6F7Z7BW9mddviBuV+1jLY7fpugxQJJWIsaBOTb4d252oJErzr7Lcz+6gs\nZsVGgmCSmqJNma6SG068Ph6LnRgie4Xk6guEa1j9qySOZ53IXWkTLrFCZriT\nOCbZZpZqMBt60g4XP/iZA8Ej7lK0pWCCXt+Tj9cpnDArkRgz2i2heQIDPIrI\nLZ2w\r\n=a9Kq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBS4v8b8cksl+yfTL8GdvW86rC44akMBeqweCkq921TwIgdZvm2/7PGz3SX8K37NhJ2TrXTAfWYPWex46vC1CaJfM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.946f5563.0_1611362615551_0.0580236219956729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.43664f0e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-ripple":"0.21.0-canary.43664f0e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KQpLMUpDyvyvoTK9bIePpnTWMIq8Aui0aO5ZMr9juGLY46rRU1OdRioaeYZbhC+jS2VgwLtE4KL/LcgZ6wgXDw==","shasum":"2f407803f436213696c6eabf63bf370fef9291d0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.43664f0e.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jGCRA9TVsSAnZWagAA2sAP/Ana1k6l91tHcSuncy1V\nrjLMi8DYe9a9eoVWGBdGEpClLgEQU52138pAkq1wt4AzulUAltttpcccOtDU\nFHHsu+zzCXVmg3k0K+nCYfXYfPZ84Tfdn7tgPJMP5BjH4ZAkLBD4VvWIpofE\n4dLzgYWeqR54Y1eS54uxAzUJHCjHV7p3t3F1Huhqtni6FJWsuzZR9stoFc6g\n1MFzfoX6nBGQARxrSk0kAOWimTPepbArB3JdntxxPzh9kHB1+rzvM0PPJRNC\nkT69b2Yy/KZgUEHdghEPJQ0KTO5LjWI3zYzjaSE3d+0OzHH79saFWMiKWKwB\nNmtIOY7/M7AIRffhOElE0q4TEByJnTUPAoxx3nBcYoyvLzX4d6PEyt3xkvnp\nvvHyKCRgyrcQjySvvABCcSjFiB+0E3cK1QBuVcv5rKzSNZRaoV83l/TCRqTV\nNf3yDWhYwfC+a8dPtDUfdqZBVdj5ncefAOiZ/98mX9VorZ2iu/94lCteqy1A\nBIfE93VAjU/6hhdPojkCxtwPA4hDdWRQlZkKfoEGJWQ3UWy+//RqV0By7ojx\nCt1svd2cCLNJ5rgRGXh6jT0/SN5RFWlqiIG+CiNS2UxLPwWqUWEeT4wamwzG\ne/HVEaM88t/kgziM+jD+b0dBqy3QGIMzPzBTn3nuk9E5kJ544txzMnkSzhna\nHoB/\r\n=qM/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkpOPbiPZDUyzLlwxfFiEGU0dOylgzQGm11LyiNmRXGwIgIFFE4vB8YQXSnjhu5X3Nx1qnI1U5QYVkN/3pVXFhvYc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.43664f0e.0_1611614406485_0.3201232232406397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.2e769e3c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-ripple":"0.21.0-canary.2e769e3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-G8m6neztzytE+l+3UoXzJaZt7USGtRt5W6dA/T/BvjnhQeZCaC84Dw1MwjyacvgpgB6FO/x/Y1b//lsov0TOXA==","shasum":"e09deeb664a29cbb282fc35674c8cae98918fc09","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.2e769e3c.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1z7CRA9TVsSAnZWagAAR2gQAIDYO5A7TTODBra2+L+S\nfWitoQpUpW98Hds42hJ8mFa5Wqf/iu3GMBqWj/entv012m+6e+hD9KNo+oAN\ntJcf64MlJgdekZKU+tzS51pye1uGGHSPeGnzYlblJ0afuuDZMMWOq576Ysav\nVuCe7PI7JQ8DEJjxu8wJLF5A9mdlyML5/pIaM9Uu3ti9oGhqhsDFRIXqjv9E\nYd5YYF97u8cQP8vXqFWMNF5ukQEtGaYKI0L/09iPj6DymneCl5Y+hBR6xeLV\n4KSYgiQqwUf5UIuEZcV+/7IkKpi1EWp++oKDsNm+vNLYxg263jyrLYZ8Pz7N\nAVujxDx3tTggJpQK4emMvl/Gm4K74UWNwpqXDVlvofjwfvYNXpBT3uIB1i4c\n4BUjrFMrYQiFqAvxaV+1EFEOd/OMPb1Hzr3lqLMZHMjinQx6LvdhJJA40Mg9\nA3fU3SP2PtsZBivIf5v8dgxRhmhLENtyZ7Xn4/ImDDd9p12TnIM2ZcyjQnB+\n/t8Ry2mfi6o4drgB0aWPhYOdvHBirT+PKrt9tKcrvQjMoPJgqfT/7zJMRYeZ\nvY3LfIuskuwoH5gUreUzHom27E8dLLha1hrjM/lUAWOFNKqsbpfFdZS1okAJ\nyJFRWgcBjHadaEwWBxJGwrd1w2RoHPz14iZzTXG4pFfEpZsOhm15DzRRagtf\nP8UH\r\n=QdCx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNuRLLcHrjcm0fTSxQTQWtM3PQONJAXFwsC8r418Vy6AIhALliMeF+cEl+TXSaA6lXnkAN0MAlFsICkPGvMoNtoZur"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.2e769e3c.0_1611619579179_0.23764977302467138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.14e01610.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-ripple":"0.21.0-canary.14e01610.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ciWJdqZ891v1zvMZAwNp5X3lU7UP8plt1aHMjN7+6AUUFCXb67F0D7obInrrY0/7dDvMSOxhzouKSCkdotXo6Q==","shasum":"cb3802b3c20a0684e126e45a3783483374a0e1d1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.14e01610.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRDCRA9TVsSAnZWagAAyqkP/2O9nv4zBLznjLZYOH8F\n0p+VOJpj9qQUK4D98xXt5hsUWDRQIvvtcPxNkju+gysW7RjXA956JhOt0ppy\nb3Amos8sk/RmazQ5zXSaL17tbL8sfm4nVleWrRXo9a7+uYhCkW6Jzmap/lSH\nwOfTCIaSA+pyLvZPSqwMSXxvRBD2lpqdakkTWzDFgKK25Ncn2OUgbykZ6dlD\n975EF0dxwv/iwS7QS/uVDs9WOoF8gHPSOSodQK+F8nv5eT/Auun1chdTx/D3\nP/VmTPzhbQ7uegVi3YdvVdzPm9s6mPf5bLJj7bCodhy/VICQ43Ux8DGQf4ac\nuXsxN1nfGcX0dv3WfmerEirPxgJjSI9NUjEfMkFhaFmY7Xx9cO2qHnmlZ7PV\nlcHujI85dj7+dr9RQSRz8/QCkAf/S8Z5DzeTE/1RILjalj27berlGsXgrhZ2\nI/TF3wqQoNe6VYQApa6C4G0i9Wu6fydDwm5o8uS8rpZxGAT6VdqlCbGwSOmm\n+yQI/4d1nyjsm/pFE7+IA7Km9vAnV78vOqXGi4jxyy2LsRgdMu2eCbvP7S96\nKvHjk79TRkf8DlEw8t5llHSrrXjy7ME+GNwODo2Zcyve9ctQx90GwyyapVoE\nK1Dsc4EiXY5oqZs0CojoHExulw/Sv6WjX/MlP0fbqpFqWOGfdOHIfKNccjbG\nh0gy\r\n=Riea\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdqh+g/S87x+5y9TBr7lgQzIBZMAyk+JTBEbOGT4MzzAIhAMuptJvesZBsVMeGF83Tvx+aOcA9Bqn+C2PQES8uzMYN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.14e01610.0_1611777090989_0.24065847612419122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.5de00c1b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-ripple":"0.21.0-canary.5de00c1b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GyB6lveTB+vaj4jNnLHr8OVavXoxZvGjgAscppMMfE2qRu7iBucj70hzDaibKpPmsT96g/1yOElQ7ooEnit8xA==","shasum":"1d0ccec71cadc046200b037f8eeae671e3bb17f3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.5de00c1b.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpJCRA9TVsSAnZWagAAc8MP/jLOMnBvPtmfmvOpO2VP\n9JTDqfI4jEC//TWw4KcZtkBpvz9jQMvMkyG7hqrg30rJTNEZ88w+XC4vkG1I\n3yTwG+LbzDB3q1k6LCpvp9OctzMibKQ+lOxYFDUSncX8qBkXW/abdwMyySJ3\nAdKCIK6DcgimJwWkHthhPxJN7oD76eaNJAFdLRqY3jsvRdwufjWImYm8JSCC\np+CmcbXwmp5bs25EtWlnRocYzRgtlZ+iIht5v7oZT3+NouS3GNZcO5nKdbey\nM5OS+H97iBxWFZ05Lkyp8+UMdloADwUU57L8wOTKPe0y7zEyzhrtmPS/gn/1\nAmn1I5GCITiz//DHZJkJoeIBF9Ev/DNixxV4tom3jMhFpJ7ilAmlk77/jzHu\n2QAYnJWjRVkvHSOlC8XmzjIdkqZEq2irzNhHpG6Zj8bQBdt7/u+e2KUzycFb\nZcKMU6LeadU6hvwMMAJd0esNgnYa1W4+cO2BD6TdzqnD3ldyOvf3HdO6kFhK\nGRuuMpEuaEkONJUhv2hEkIrpWyTwZtux/IZ3H3XljmZ3af9MnvKdngqgE3Pj\nosIhuAPHA2raWD6kMm0jRMD09pH9rHUZE/KV4wUIVaOsKvKYubuL7sY4TDmH\noZsda/ARnmgysVd2NZVAeuKUdLy++SzyzdDATPu7hvmKcLr53znmH8PyGXcd\nzh4z\r\n=W5ku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCekbAEUJ49QLiaSAD+wLm3LjjrTyOkDctOAj2rxPWoEQIhAIme9MAkQxZwAIjbHAltyFaZOAiwmiWevn8SpCcKUdwG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.5de00c1b.0_1611778632822_0.11841422024108539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.5a328336.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-ripple":"0.21.0-canary.5a328336.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-LWlocPH4eYI47wcsnyiZpRLgrPPpOoNIR/492zX4vjB8fcS31O1XIxK/Rb60cAgbTvMdyQ/0ggOFh98NbSiT6Q==","shasum":"15a236bd99efb2b43e512952d848c1967f14db60","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.5a328336.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaGCRA9TVsSAnZWagAA1TUP/1kTK8Ft7nV7I90YTux4\n6MwIoLdBSqfCeYYywkDxwD/2TN4T1ZaxWxp52vD7vR4gr+JJdlyR7vIdbufE\nPW/dSbwx8cE3CsT5TyDJ0S2bkhI8Z7eaNynGPRbj2YNRgyZsf32avy2uqwOR\nUkm+nIAVk3Iz6l2IHg5vwBPaUk5Ngp7D+FZhGyFG2HwsjiBIz2mvetD2cXPk\nSGKZBA5uGeuQ2egY6sCWdN/8g37dsSLgAobfb05b8MV4ICsZqebdfusuDHrs\n1CCwEAPRiczcmdFbKvGZsbC9riAyvUTEQiBuO0St6pUAKdQ+M08tspKHYozG\nZMep/KNtlw6/g4no2vs5ZyLpGF25G0i2muHKCQaDmSbNNDSh40LKhOK/P5f2\nKEqBzhh5NBF2hjL/kBaLJ2lK/y6eR3T0zl4o7HNKL+u9+4r835aXzJ1Aof9g\nxvTJmaRYjNv5JG4ZqglI1pHgOiXmrmEMfUHNPS/E0I0+7F1bgusWdlbjsUrg\naSn8GgnRSMF307CGgUlStMQOqHtpG2NVNXPsBIuZU/I8J499RHG8ssssOV6p\nZqopBi66LAlzj5I+nMqhtGCmqSsaSoWUNAm02NheM1jPz+GNTSu5y1JZeTJj\nbbHD7dsepyyh8CBV/1Gj4LinD3aNE4IKo5uzmvocvRwbgvrHc3boO9VdToi2\nfaRP\r\n=TTFW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFh+3g9BUG/4w/D6UQmwY+uJN0CjGsb5mtEUHlBVvi7pAiApQSSZtjOE9zzQFzPyqWjt56QFSyViiokIWW1+IBmZSg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.5a328336.0_1611863686470_0.8806221847412019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.533b1251.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-ripple":"0.21.0-canary.533b1251.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-jLMy10r8k6P6XTXgnuVu3/HpkUT8T6OmPO2Qx6CNJs21qoM/gGPUNe79jqmobYfzzAdN8NBuoq3nb2Snur2gGw==","shasum":"14e4400626e3eae889e35127f11701442b926cc2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.533b1251.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWxCRA9TVsSAnZWagAAA2IP/2r+PdBY9kvdKMBVGeDH\nU0B0DsLuBLlWdkaJTJHhXiLRKRq+eK3zYVjujYOR1tGoXJPJT9kj6qHbdZ4u\ntLLv0Sk8hBlzLIXnxMo4EJ51IczHskC6nJi9rlPGv+AbziBiq6MnZ8XLw6Zz\nuMYXNPegS89kf/4y+I0OHdMb81+41RAYK0zOn2JoPcm1Mn5Iw31pxv0EJXfB\nczmA7Vr2VChHO3lwqWYxG4RAQtFvgbZghgpCaJ5YIekwGydhrpZG/mOErg+K\nShwtmud/d1iZpD3Hf2Xut5V9e2V1d2mTRmqZ27mf/eHekRPGABgJIdESJ2yi\niCIGIHitIoDtQjo+fek5mZPZnHd75o829mlb5A9kx08rZBlWzmeiwt4lQkFn\n089fEkpkGzT6/gNqXzKcAkEhiHD16zzhbp0JerKMbbRaTKV7RtDju9m7jaoy\nHoZo0FwIBBuUrtsesIVuF7r+KYWrrafVnFJlUqokDlhlTvTxTSfOTK2NoYYr\nsKcu4NZdIJLXwH824WDHqVouNzsAqzo1wD51o1I7FSSHpz/7/dEpI9xmljJx\n5qDQSymvlVQIbaBRkHuq7+nxO9wXbLsrIyYIWZzWv/TZiewjW0maFzOQObN1\nRb48Du/34ZUCt4MZQN4IqwZZGRfg9dfHopmlxrMjU5NksnofhyWn+5YtaZ2l\npg1p\r\n=mSI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqKJkKjxOw+BvdVqw2TGeWor3obE3M2/vFC4SVqd36IgIhANbEwnmC1zHLrPkN95C/oFoEdGdEty7SyIqqUfjHrzTj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.533b1251.0_1611933104591_0.9182359195797845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-ripple":"0.21.0-canary.ab5c0a10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-kSUxzacPZq0BIEYCotw9csDAnprrS9E2scspe8/S5ekpxiu3edy2/EtK2KRL3K3iPt2ra6h0wikvmsQgsxxvaw==","shasum":"47269bdd958d63d22875a9e827bccd7eee71935d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.ab5c0a10.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNaCRA9TVsSAnZWagAAgJwQAJUuIIK3iHaJKHOzx2P3\n7Zlgoqn5LXT6whXS/fEVMLQyweYd4fxQ4HI/eXqSxtkGIRXY4401IMUd1NRx\nxUPF1mG16bkh0ZHKQ/zNYXsirRfdRBJB7KjJJKID+jFLR4FopUaSB1kf9c3+\nvlhr+2zpkjH80Vu0yeaBCn8Pge22RV+nJm7uNfOmyQBNtMQWg4jrAQdMlnbC\nkg0o/zLmTnH/54nC/n516w7NT636luKxVnGYa15vv98xeqLyeulTJQBjGeSX\nBfNANud7D6c4AUr2WatJXiNZYCKEMvS9VbP19hQdFW9LlHQnKRxZpo8i/2zn\nLsoQgl0nqxXomincvlyYAaEDZ/Pb8WrkHvskicjF3W6v4M3sIbzrF7oyGeKE\nWTENfzI9TUm5Aebi0PU8p4IUw2vUqsDzoSetERdWNXZ3cKfO7Dq2bDFy1hEA\nIM01XyiePIJyxP5RHtZmCV6P8by7ur1WywWJCE7txvf63EzGv7igOya7GSNS\n/axgq0tb/+6Ca+yZDngcQxk9Ek00FcEwKeVVEYBp5G/83RHxKU0Pfc7w7Je7\nPhF+cyFkZBgQpLLm9eo9zmi8komcifUOgPEhsQfwoeGQbdZBXbuT3t9/pCFf\n+oqVrtOoGa0ItNxmhK+DmAGtz++2fFA5gp5DrVOrOAKHzied69gx1/OFBAvz\nNDsK\r\n=/JGr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdcCvrRg//aM7dnC1qsPPp2wDp3r9Ooo5FGNG4xtM67wIhALV9SSH+1RAH9A9lvv1vxF3qaF/GamhiWWcuzwR/ybyQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.ab5c0a10.0_1612297049940_0.8394463972088622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b7a40b27.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-ripple":"0.21.0-canary.b7a40b27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-LhVNeAc6f1NyzXFnHOMcFqorSyyRxVbTROSE9xgVbAfUuHUqzg4R7whdSg4I4CRBaqhwE8VcDuQe0f3skEH+RQ==","shasum":"40b1edaa0df5e20bb159ebe99bf6482955f47c7c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b7a40b27.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtVCRA9TVsSAnZWagAA+ckQAJpNbzv+8JOfr0HrZOmh\nAFsTPwa09qhxT1Zj1jBKpxFn3TLKPBtJ4r3KmJmQqA36P9yCGppZMPsNoSQC\n6vsXwts+WP0cs6FNkuETv25h3E9nPLAfTxAU5/5WHGpk1xvkEGOyhLvk7Wjn\nwWFu3bCuaJ47TTlX0kI3G1hHWmLapCW8z874upC7x/23vIVAtvz7OBDoVFT7\n7WZEAI+vJzEqODgnb0o0wl0fs9WUs63EtQrKa2/fNgUnBPqXs0IBaNeFxNxy\nhjvXLDDbc97r0g64X65EPDXF9fpAGkt6sdaXqc6SnnhAp9krYUZeY0xG/Wy6\n2eVifZzvCyJmZZxUlBV11TmDPsyg+WBEFi9dhftBuKuHOJecJMjcCo8tLjzj\n75lcTqsYvdryIHSbh3twq7tDsmkJrNumGiWilIklekg24mH9V0MlguIHjMFm\neuHZNHM8i0/mor65h475FO8TuAXYo81EVAyUt7v2XU7/UZY0dAyndiwjMfbG\nLlpgE/lTAmnguLtYjDWW9wLIW4WBAQ+fbAmP+m84QhhZRvoq4aIFusWANPK2\n0C0t3/hfNTkg087xX03hF2IbJlwOhGWjNvJYH+7h+yIk3GuvfN1KHYG906KX\nnybKF5EJxTpigtMIIUl/5GP446u8m2WVEQKWo9O54IGVORFYuUr82nZAcwF3\noKpM\r\n=Axx7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+7hY86zJCXENmf+8XUJK4HjickzZDCNjqyM8JORbFAAIhAPf9NyiX7xv6NfGgGPbHNJRWvoQVDc+CWXvRYr+u1TNU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b7a40b27.0_1612364628898_0.7356023218263836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0fdee204.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-ripple":"0.21.0-canary.0fdee204.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-S/OGjF1+rXyOJdLDb+Gy0T4Lv71XrvvWKSV+O359iN0c2qZyiCW3MUzfWOlWZGpxFwlPZ+Yg1Q8iCKxdm3J3zw==","shasum":"30735c44ff8fe8df0744888f42683d9d076c99d5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0fdee204.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuygCRA9TVsSAnZWagAAwpIQAJOhnVPRW6GmFkaufnA3\nZzLHyQx11TsT2hoF6oksT99IbB1r8tI5ERgrwcLs3Uz0iupuGzPb+Zbw1coB\nzBuoym/XkpbKLPtpKhwf9jRQk24A4Z6bx8Pv3N9VrdiBSZbkQG80FCVTNrtM\n/nj/68SyR6HVbb6hMlGj/fD0+H6agoXwswxX9dQDdG7NdcqOtVLqurOzP7Sf\nhZ08x+eEzSRMQoyoV1kuVETX0QcoxoBSx6kaaEyP3nz3Q2C386cMXEqT+A6o\nwfS7jzaybEKhAVjIuk7TFT1FB5qcLvSUfur1iQUuuqniXubXC6hvnCJJeJpS\nNYXlAfmR8C+BSLMIvSkoDm7fLZW1CY8WHXq5HhNvEj+pAH918oiWVCbeOKmg\nKYfciUwts1q6aKkGvhiCBnyRZu6RnQVDUb186k2IP13XO6stkOgt3KYHYFI3\nLoNeW9AUfpohKv1wcDrFLSR5l8zlb9nkp0ne0S03qJbXUnVlPIP4rF9rR8hF\nPiBZx1rFs1GmwDzVYUR86JMLQNl1JCIKSDEUpD0DHUScBzDkPOhNVFCVzj5M\ncOxeNFx1pwcR5+RaUWjJlvIYHTYUiJJN1nURcep0VaFlvY5LeQrFmi+eSvPu\nELjRC7skYnzI/EgjLKmyD7fvth63gN9g4g0Kor1izmioe5CIgvIQjA8SXD2X\nqHHb\r\n=V6gU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdSYuwb83qoaQXPMxMMF2sKj54CSFTXJ27e0bneYKh7AiEAkA2oMKBR9X/+/Rso1khSGKhZw8pk2bmUszN3DAv3h9w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0fdee204.0_1612377248372_0.7304500830661125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.5160e548.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-ripple":"0.21.0-canary.5160e548.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ZByPBd4ggx2uSKXHsiXI/6NPSFkTjP0tFQwpASxZsKAOnr1VmiGh10mBj6Ed1/7bGmUdDdABA4lj9Yzjx3kBdA==","shasum":"506c67d6882e9400740adb1ba4848b18c5753014","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.5160e548.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdn5CRA9TVsSAnZWagAANd8P/0O86rsrbihb6YVT4ugX\nrgk4dtAFjT68DyAeaHkdH8qBwRGZyfo5hwBfHCHUkhQu+vrFDd+vQN2K5O0Q\nnQARQIm1c9cawzB/K10xwofNd/OqlOfTMZA7/5rpKKJTr25a39KsXUztLN3M\nInin2IRQyMS9nLjeAnJLwVe1oEpb8XKvUerfhnbrdLg5rEyFnfXD+w0wuEYq\nJoZ7/21dUsLWacHjdIeVsSDsr7WxgOCVuYDy5bxuW+K7vYdDPRU1t1iLm38L\n5Lp/Z5S43vY6Y2VD5a+wYnD5pjiVW2zhn7vJsghwrEDf29Vqb5l6oadeTSvT\n8KOz6tg9LOGd1UfmJJrShu92KFOtYkjEEL1qzryK4YA+8s7Co8uPjZMJKrAG\nEP/7lMTvhDpK2QG+MBmtrGdqwP6+CIHdsZ2K2C7mugV5Qqvnf4h66CT0+mfM\nKukLSWqcji6m7pfTmDe5Pvz6NKXkme7iWvhMDqtUP8fJqrSLptkVB2lIrOa3\nPnqyyC4GcLLwauW45gxakZKAbZKgahstlEM/xyobBqdMJIPMAGTwwqWntKfc\nGmDXMbAHAuJ3TE0+oSLhw9PtZd7oJ4kUY/8XyIT3mf2j6M4nLSqGkA+OTaFl\nqtN9gqtXW0zc0iUyKSdJwzAd7xJxyFSmGLrDDjkPLrBXwHHGK/+MjfZ7rJpa\nOcDn\r\n=B+OU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBiQmaZSVNzLmlcbxhqesVTI9wypWzzigLsc+z3OSeoQIhAOLMOw8BmKiSCD68sLTIul9kEVWVF152qhZgsnjKVgB9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.5160e548.0_1612569081395_0.19113100288745288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.4fa2daec.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-ripple":"0.21.0-canary.4fa2daec.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-8gYPnC6XvjyK638sggUvn6XVeql7744PpFwXTK5Yc3VPupFHcH+lcCjUUXcDsbxRm14EJaglyy2agyTucs6haQ==","shasum":"9be650ad6fd8875bbc160f602da02d8b464ac77f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.4fa2daec.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTdCRA9TVsSAnZWagAAx2cQAIO9MT/7Fg99p0gOG9YW\nRzJVV8TcBbNwyAQb6R3qLZ3/ZQBr0tz48S7pbaGc1L6toMD75/eTL5XXQif5\ncrpmk280Ucw93XgIfvyxWlPKOrU7XuCey1wwNnUNgMzS3peSC6h0sMHEA75O\n0uzA3phO18j9OQDvFC/fLMGrI3QSkDGieTU07pjfirheQK2i0ijAxp6ek4yI\nRQyTaLMHrSw7lYdu1j0g48F2+0ldwW/KoaY4L4wFsBXebE/KJVfKJI3Vl7JX\no6PtUeSYDNlSG3SwRN2zxCc4h3OWhRPYxaJXNQynWTAN1cF6pYnoGQwUFlFl\n+EKfMnSiw6fhR5V3lh9V6rFkeI+v7odNTgYXBSdkt3ZsjFkw0l4lhLY8wo5A\nrdjqTCnEruEUKpGOwh8f+CMHfbK+1ZAj9Ix3d9+uuZFcOhcKsJNHwVkWdkGr\nKjujhkGKBuacRVl+Ql2Q7jp14uo96x8Qdw0bl8kktCb+sjR142Bd2RQvoo3E\nEp99j9x2Ro0HjjkCqMHWzN7ROhebz/M9YqqdfRXYJ1XEFpE2otYkubOLMad4\nmmTAdduJ5Vv2bzy4nLyxEA1hOlq+uhPWY4YtIpgUk/+Sf8usNR5lP/6HwKwh\nC6963VZUaOuWaS7/yE4c63bGmU3KfS8bv7NjLcZhVOWshkmNOGz4GTYaZmWa\nTiz1\r\n=Se/h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgLSRHQJcXAolWUZAr2jr94U3ZO8njvsItg6la2Kp4GQIhAO8xZJRdZtutiwRUdcKaevoRPhn1N7mzpTDjDUpPducU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.4fa2daec.0_1612829917187_0.3845972360039056"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.67f285fb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-ripple":"0.21.0-canary.67f285fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-x4JOdKdg4aVkgPAY2SyrBaOnNMErn5/4dPE/Zok2j3UJVNhKJ4sSn5iKkSmiPeXFGD32stM3spky1Mpu71CyjA==","shasum":"67c81b748e7ff06b2ced3c85752405f20d85c1f4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.67f285fb.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdx8CRA9TVsSAnZWagAA/AEP/A6kWyIqKanQ/mMJFChf\npxcG+gF4ZdnHaO1fSrfNnFW10RG0gVw3+OW+0w4dplhpkkxTQqwpHpJH4ycm\nEf2f6txQSFGF60tghzEyakC0P+H0WhDZm/jptBfC8hQLX1RB2kqMwLz2zUBc\nNcHxn8SN7q2etbmquyttv0xRr9+xxbAfBh/SUOQjnzJZl7TMU4mkym6627sL\nipT5LEbB+bYnZvnQwqF3p56qltlhSePgFNeAW+qGiH1MIh3HzQH+gX4FNjgR\nYAeANuorpr/7eTLYfnzxVPsxz6bfY91V0Ay2gjLkL2qeb+2YemWXrRktR57W\nHXO/eJ+3u0ir84rmnsntqJMfUqSLKBU2H+aDqpd8pgnOEH/QXtK6P4v4k6ko\nFylU9t98dwENsO6JMxDa8Rjm+edcqfwgttv3Z06rskBLtlk+dKCxyaCviGx0\nPlouzO0g2jikZgHSYbPZDXh5F1vbfhEVdMCr6KAABiX0jv5CNXE4EdBJ7N6I\nm3dijgV0LF0RTKua49kqqeMmrsQzSEpGmXcuROGPoAcmu+nYKsYssI0wd3su\nM6nBBhxi1z4fEhsVeWZITOwbsdjJ3KCL5EpQGothWjmZkfUVHFtYU774aSbP\nIbStHqt8a6oGZP7ung+ACm0Yl4NREWUBPKjDkFSG665VKOEh4wq+R5b5/BzR\nujlN\r\n=2csg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVPOTCCAaQNU/YsYn6NywD8PP3uZH7rVajj1v40HBXawIgTOSuGW42/o1EweUFv81hLABIwDeSDZ1LY+8vQJ8HrOk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.67f285fb.0_1612831868177_0.36216406696324066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.58cd5a70.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-ripple":"0.21.0-canary.58cd5a70.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-qT7orHrRq5ndt+DmURxNScC4GrCrqj7UBLotbqFaNbwBu7O4j53Dj3nxYEhbT9cisNTKFCW3mBw2kkp9NxMG8g==","shasum":"e5012a8c6ecbb68de92847079cbcf5bc9e50ee59","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.58cd5a70.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdXCRA9TVsSAnZWagAA++MP/0CbN1QGxMInXTltF6vK\nfqVT+VfI19STrTgdHH/4sc9C07Yl0t97FBWHkrDRHYnUujGJr34VtJLnwwNP\nn+0ulwM4Gp+0z8ZcND1behscY7KqKkVru8mCW3yzcyoPdbyNFXyrbrDSMBKJ\ni8LC6bzSzhZjwO9oyf1z/WVmdMmd+sd5yGo78mOk737YobtktnJZBDkifXXX\nuH+xj3YcxJ+ja6eOasqfcs0GslBvfUQ3xIwnnjLX0JQU8vb/EOj3/bRLHwye\ns9X8uF73W/mcw5Fdu+Iaj0zhR569lhNmN+w+YLtughiDMZox7BM+dMaFt4Rk\n8jywDAYMQwWkhhXAk3pCiLXuROtDzFfx0CKs1qqWMhMNgnzxVCJjzpttNXBN\nNzvz6vdTL/xh1ThXGG2SnXMkooieqqCdDO7IiEU3kien70Y08s2FXBx+LwAd\n9uGhtZfZtoCOI6NHlL0tbySnPX791Ncd6hVXPiEAUfA/fD6M2QT29S39P2My\nJK57Ly+xOAJs+0PexriveAgRi9EidTQ5X2F4zEl4pTETMdKJ58ADlW+rvzu6\naU6StS6GUO50LPTRIO20SA2DdzVdrE2b1dhR7EQAGHZGChlbOwtJWswMebLd\nPMEYHv1ZlvSLtVHZ8W36LSE1b84RNFnTo73QpBfNTx0J1+yQtPEFA7JIplJO\ntoOQ\r\n=s3Td\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJI4AGKY15MxNB7m5wPV8ttkb0anESG+UKpHvtsi6EzAIhANFUEXliJD/l9Dga4eSDA+zmGGYTVS2Vh1+iAsPVM1Hz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.58cd5a70.0_1613076310756_0.7953672056154446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.8107ca43.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-ripple":"0.21.0-canary.8107ca43.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-hpiRh66UK8u/45lPuWJhqFsCrZurTTp0vmCA+3RcqdvmbP0IFwIwiOuJtJguRqaFbmikrKvCV2WqFGPN1Rt1yw==","shasum":"9f2486daa7efd68f8db90d467ed015428240492b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.8107ca43.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb29CRA9TVsSAnZWagAAtjMP/RAG/Uyjb1EtXKSEEcET\naJsGD2fKD6dJhat2yVtDXUZy0jXp/xhwna3rEKR1OlzQDkIKdNhmzkArs+PT\nEWLvC3rZSSXlwSOBxRiPFWKwFiVznnz/HzSI0MNwHPXKyIJCwfS5G++gyaAa\njqnZkPj+WiNEL8StXPq7DuQ0zVJ4FVJv/pJKfFCrF1ePeu/AKyR0ldSwh0tX\n0wOpDENv3Xeho2m/qZOnutmXylajciUTVOQhDo9g5qoVvS33z8MtcsWj+i5t\nmr5ZSPwLD03B7kyL42EtpfeFw9bBhMW7aITJp9aN8P++tJRQRH9iXJeHmBXy\nkRtHaAxjdY7IYfTIVrFeXvG7lr5285VjGsM47pnVFr02Qqj9Ef6ysvgHktYQ\nfpfq14l215xAdMW+5Fuvp3pgfjYNn8kJDlB9zQUx1NYww65c68GYJEschtdz\n/shHz0VO/0LJI9U9wIvLCBQws3zA3D257+lp6VwEVaWLXgJe6vOrxbjczfs+\nVrlT73m/E6GtjIiTe+IqqE04jWDA4hee2/G3ZUcp+7gBSMlM1u9DfyRxYQYi\nBQTPRSkkHMp6exmHK+Fr8cRZOIksT+w87QE1D+LD8yXBs4CR6cbr27zkf9PP\nK3MkUnfWOnKM9XSZQ3Qow1vYgr0osOC6TVXXNEhF7+GEBq2S3GmzCmb/3q6W\n6iPt\r\n=kRNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3iGvrKRmK/BFNs0h+zapAILXAklUtvYJNARnVzrpHNAIgXmMkxvoTIfiROsYrRXyCi+s/gz01xGCcYGqr4cVrYkA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.8107ca43.0_1613086140809_0.38679465224791376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.d35d64ef.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-ripple":"0.21.0-canary.d35d64ef.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-FL2J3UIH3/A3RrCJ4V6eQePt7P6pCHsoHfOKwqKR7G6jEZcmtn9fIZSG/2/XoLlROq0GKQBDY0lbIrQeGaoAOQ==","shasum":"4ef7c89a0c3443f8d81be65a18cfb7c90ebef5ae","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.d35d64ef.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEOCRA9TVsSAnZWagAAeQcP/0qye8AnWF6cmeSVz3lB\nXQwk7D0ENJCKGlhsiEHAbVZO0HnQVmO7zcblsfabwmS6TgHqQVmeiBPlXxJ0\nInJdodo2kOVAmYywvbpTxtYeHSdBm0iFSwwYUAfqaTIIzLY8EC46bTv2v7ef\n2t14X3J/e8BYygPUG1BjPgrG/X3/OxxNHKJkIGCq8GitmjhhmGNdZ9UH1UAM\nKICo5Pc8JPZacBqeYEi80dGbp2AI1gCKsJMZ4BeCDmThPMd1bZXVl15pxHa6\nx+qeBUUNHACw6qbAvGLXChu0jt/+ojz9YjmJox7e83SqIcRKP4mAaq74ovEq\nyOTLdgEkdRhsNUt8vfqPQ3G0Lth7yqiiSdg2DehYpLdb/XRewwOx/ZfjQ4k6\npfL11IwLyZTuaLxn7AQx2MDVAoui766LdgGVSx0t1ThiOOnLMLPh+cciaSdE\njjO4XhHjj9sSbzakXzzs0CsdyARPkAVB0L+WeQQsRWykTL0Sc9tegMv6on8E\nL4BuVvKf5M2nuFpdiR9592vdCkDbGPDWfJalmpl0AgsXhmRu/hhAAVmCl71H\nDaWT4SQm51s3An7AvwxkET2/XKF2BMUzWTZaPtR0l272BNXi8kyNGlDzK+Qi\nyLX9b/G9iebuLQvE7v3gElDdfGOnibA/zMPgskKRDkYgOWk8oAtW26agtWdk\nzi/2\r\n=yDXf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY3ieteEnVdyy2OL68dF3BonDQL0W0QG3nDoccPIJOHAIgKSNfIkv8EQsxSG8350NHBUkyJUDJog+1yf2VKzvEElM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.d35d64ef.0_1613086990132_0.26377124401679275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.78bcf058.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-ripple":"0.21.0-canary.78bcf058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Q+/y5U4Zc6E35KPbf2XZeo5hoYvXT63xRObKnugZXca8oKmI1eGfpBNynNSfMG8r3M6zCHGIOPextFXWR0a8tA==","shasum":"dfb19ed7a75b4d14f16716a479c80b726e5c86eb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.78bcf058.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBbCRA9TVsSAnZWagAA3MgP/1l7cV9ppshvQNONVj19\nY+bGY6rCDuX7/pMJr3wILMPVQl5sNQQkZa2jztfCm30pMxwxBZPzrBLQdUGe\n8cgArQBJf6Dwb/GCDI1UPVZa80km+BE7ADXpNEnejYdg+6ha6yYTq3rLaZtJ\nc2xtTQ59o3eUMjPSD13qYD19G2Ik/LcIsJuY2f2Ns2QJ3EXE0/fmoLCMfbSY\nuysIVHB31V8M4tD3n0pJVTGOGKLaKxVQ3clT5xbeqiTmbWf3NmkUbgtWg4i1\ndYRPlK/uF5h3bdmXpn7lGWYUxXxJCTfgajrariW/DEhxxlGt5nkAqdBM2tqJ\nHfoSF6ozhNbLgsFhurcvSgj6kGTfY7/5pCldY+I28+xdumJJfowMJlW8gcQ2\nfnGJlp+xYne6WBh4ysnCZfQfUYTmkAR+seAlMJuVPpvg2PN+WP38vpCUZmXh\nH3o5iDFiP5VE8LAqOeYkfaDG3n3DEQdsOI5JBslYoBhbrnwmL8eTa3B+3twe\nx8ClUxr9zZSdrF43WIvX5Uhq9esvwTb16+nNUW122JGWSenMXPZyBsxuL2C/\nOH8Mw5DcId9TyWjLfvCpfW7qjL93GrpENrVoVaFY4XXL1mSCG8KnWtsXqe+C\nFP9isd82o3zwBu94mHlUQAW6xEdEbhTF8vaX0rN2iQIBQWONlcRg00FT0OWl\n8ATC\r\n=QXH3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz/CIGt20JB6WXwK2IkNkCUd7rdANVwjBNVnH/C4g/IwIhAL8ZEULPX6kAWUQF68h+5D7JQ8K294csEnwYMpbiX258"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.78bcf058.0_1613090906867_0.3446566084139313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0c6908fd.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-ripple":"0.21.0-canary.0c6908fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-bOrAAq33k8lGP6lwREmzrbORsVfkbqPNqqnJuKz55pMMo0xpawMiFz78zC+Q3x7fnTthWzMegci2vl8fdOnlyw==","shasum":"0860af829163b768b0d8928a41184e8c1fc93d57","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0c6908fd.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjoCRA9TVsSAnZWagAA8isP/1kKgjVhPBPWl9GpyoVR\n4EvZctBrrXywRuwT5D+ao2tXSNIdJHgCfUJBHLlKTR2wR72bOLBJIYT6BpGJ\nmONgNobfr8Hgu5T5IFdktjeQ6nAkavO97yMZjD6+VE7u0beGoN7l/nWdgntg\n7nKxcQyBUdbi8WyZOtYmULyxFl15Y1P82D/ZrQSlotZjU5K8Z6CrLRbyEHTu\nIRI8lLs88UbsuuCq5iCSqbrW8zfE0Taus2UwN/KHHxFwxE0XIz715V57MZzt\niTBtqerMeavt6lpHEbKWXsLLDgd+c6+nQnjonYa7d1ffCIrBhc9e5aPQO7fu\nB9DwDDFI1vxFXnTx1fYNtaD+Pnlqd2DrdVgDPVqua6/6DTuZsuuT5CH0rrlD\na6PTsJJW43TF5lFU0naBafpWvGHGUE1D2I6HxIEPJ4zZIP7C1rYjBmm3xlJc\nOpWP4srv73ffNZioZD632GU5GjMAZflg9IcuowhbiXxYd2pjjmLVp+xYQDH3\nY+UTG4Puz8aLEgLr15GPOi3tSOl4hAucxa6KAMX/oxeqaNjt59uavVkjjmz9\nFIbnQLunYfqQN5K79DjwV9NQ9/o/eI2GP0PrOltkkRiYm+DcY3wUzIG1a+MF\nHi+35DBME+EnIQBX4/MxFYPyWU06fvDOTbdxbuMTh7XbjH0eusADf21g4tZV\nv7Mo\r\n=D+/e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4g956H+0epb5V1dFUhGbz4CM5ap6Amgu9XeY7JQ3SeAiBoYkwAri8zgFnmVUjxSzZ95g8DjGfMdIubZCJjbBl2GQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0c6908fd.0_1613093095774_0.13061922177018404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-ripple":"0.21.0-canary.f1f34ee0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-xV67LcglbLvS1KamRUN+cVppSArUlUvVrUN9d4CcZE3DWMBJOOJ3S4WwiZ+Nh02gyE2VLDy70pBxajB9JiKjdA==","shasum":"f926a5089d97fbb0734075ad1c6f0bb3fc48645c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.f1f34ee0.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKBCRA9TVsSAnZWagAAo2sP/ArGXz9LZh2ZjmFeRrXs\n35bXMg6aHdgECqtNqjLnkZ15fr8FVsbjlBy+IyKEaxrqDLQMFUu0/jms5Tms\nKsandGkO5v/EmdIMgAWhSoEcZ3Ikf6B22wY9bKep1nKF88D0Cp0nzA5h7Y99\nP/gG1Hy4otIMiQKkfAmJI9MNvBCb18SP4RKSw5NjAMy8cCXK5VKvuM3dVsKx\nb3DK2UwoOuNGeYszSLVyVMxqpQ4bR+VjhbC4gBGGTa4NcGNFY439nP08yGlG\nn9HuUoVQ3ZBdqFPgfNXAMrpPhf0S3WTY94gz0YnEcxkZvohrFNJstmZ1f3/q\npEL3RPGgLuUIaqmWNnT1oPzGSWts7W/GljL+eyMaBhCmV3leD5X3Cxuw90xi\njvzYADDenDdFm0FgFGhvdwhpgapu796uNnJsBQ/5p7H9sTqfcHLun88KE4/N\nD4fkYIIzJA7M56uzgZkGg5Vx5pl8b9yp3Eunb38F3bqu1KOre12hVK5nBcB8\nqLNQeZN2qRbKZjpxeJwvHUQycK6ZKMZVBBYjynzZjSq56yBYmqI7A0Q5kJdb\n8p1erfrfxGVVL7NviAmQ5tFqVWR0c8FrqxiB+GLk0RD6ZRnSYX3/ctljpiJC\nnwsMYiHhjYp16n1XOJLpvAqsFmoDYqKCsPggXAESgcFk4rOf+Qvyi0WYbAQG\ngZo+\r\n=0SdC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQkhiocsMTS4F9ONOh9XJQ4X+1XhY9Pdf3uHtlFWXItgIhAK7klfyC2NaBRVy93JTSL19KbLeB6yaqLukgilF2VXLI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.f1f34ee0.0_1613161088761_0.9767855499123734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.d84df029.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-ripple":"0.21.0-canary.d84df029.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-HVgfSFWBneoRs3XmvEJM4AMogTG8mI1N7FS6GPVGZEfQmDHf542kONJQOoYZA1p9DbWFoPuk2EIvCcyxcbzvDg==","shasum":"0e1d1a71074e5d9921924f02fbadb6319e5f4aa4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.d84df029.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgaCRA9TVsSAnZWagAANDYP/RyZ+H/gd5j0snof0xS1\n6QRUtbOnzjAxu/4H6hl5LqblDFyBBysi3Y0VDm3nv7U7hgsfXkAT/4q/yGEC\njohO/xSIjF9SZ1L78zNk2Y326bKCh22ram/FzL1hi9e05VcAs8O0y63cfjQX\np8HBkQ0792G3PDfmWb6KOIQ36/cl9Al30uWAhNcQ8vnXRN6nKEDdEWz6pyEz\nQjfJ3Xp1D1LBzAFBYjaB9WTRF5jl+5phJLjoYjwBfpPKIZk0bIoE9QcKIF9J\nG73uo586aq6jXfQZz6/DVbKzrrdGSMw//qcDiA56pTPxw5M+zLVwWgMZbj1U\nOc974jTjA35snBipgjXu65qA2dTMm0ui/38ocHCXsECcSujrjCOr1TzitJy7\nncfrAWXuLFl6wyi07xWrqkq3XOTB690LIWQF9Km7FfwoVO6vNCwJZ17mN1oY\n3yGrCevVlIZiLjk0Qa7NXFrJ5RaySL5j8+D2hwpwL65vqaHI1dp7dmOKzrAz\n21E0KlMace7alXdkPWP9u93hIWEDxBE7Dqp5+zifKIu3l8xmq+LIuyH2QVDP\nGf9BnkiEyITx1cR8q0qV8LETG8AzJHX306Yl7Y+YXRh9WSxCCz5iI99RYokb\nshevnN+9Tu0xI6pm0a42SX9i/2Tv4xWMdMlx0815abBQc2gq7O5H0IWJC/eh\n9qgQ\r\n=4IGF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+t7M2RycOjrvWCp7AjWyDqw643tCwT54+lPjz+YGJ1wIgCSPB2PqtZramgB9wv+tJyc+qlwnSjO3YSUn2Hioxzts="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.d84df029.0_1613502490056_0.8384611286860544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.c525f471.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-ripple":"0.21.0-canary.c525f471.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-P6k/HpCtEL/C/g5YUYewxd2IfrtCCfoKtSdDfgkPB4G2iG9xXwi/qWxu5v5TNkp0rLCoHO3vayn/3fgjOiVjLw==","shasum":"bea473200b21e098d79e3c16bd82fa9d436326d1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.c525f471.0.tgz","fileCount":15,"unpackedSize":84384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJOCRA9TVsSAnZWagAAuxoP/1oMA05EKDDJIEsiDjFZ\nAVh1O9cefrKl5TLz1i/Tzvq0VIL1/03B0ybigAM+PvIW/gD6dOS/pHasTRkc\nPhVZRAzS0DWB7WeFbUJqNi052mNv1qYAhcmGfmPCfIgVz9cyycaAxQ/vwoBB\n7WT5o1wD0T/n/ATG27jjWhCvkc+VftOTe5ytGlw4f3wNHoQ1HAm/MB21m3vP\nVRWCUTyy0oS4vTjUN1/J8y4QjYEs+y4P5NrdWy6uPbB841Z2DQJ26AcxNx2B\nBNuSYyDG9NWDK/4cV1tGEZskOZ1/uDTSi0mu+QjC8O3vvIP3bo9nQKJlKave\nPS8UYAwaGYwtABpnUnLskTMBHlgfizcnxW7e5/9azO0h/5MUSZNAwIGNVfzL\nOVZ7rF44E6LAwWubJSn/KbxHvYNIrgFOI9eGq9HPQ23futctgBmXQ+VP9nZ1\nolP9H5peg9/cAyLKz4FFcnlChWSEJ3PvlqUOifAgwXEjmlrDqlQSPRLAlvWy\n4cNHQJknw6tIDbICJyAU7y4VW+dhXYS4QP2hgTKptVYhwifi7OG8UH1deGD6\nx0mdijc4InDakk4hfP2XGZ5k2wA5+CX7yFSpWs5u14GQCHQypGWk7QOMJ+C4\nCx+7ZQcKXkhTe68VicaXyWpcos9Ac4Ah/4X/d4M1gJHjn+V2TNeI8ljOwA1W\n3jx5\r\n=efYb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBY3JJMhGuXVUCDcpnrxonfsZF4aUvcAEu2O+2PYLTbmAiEAn1jShlS4eezrdDofMoZO4UG0UlDrrPUZ1K3+ZSrZBNs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.c525f471.0_1613595214161_0.5036129471051116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-ripple":"0.21.0-canary.ba7a1b35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ZBpIRsjuAoePieKfDE2LdgdeyaRR8WwhyGpCUzhn4y7qqWdwRUMI5G/NuIMuUo69FyI6O+4aSCxys/0paYpcgA==","shasum":"0799324d3f8aadcd52939ccf86f9f9460a77332c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.ba7a1b35.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLHCRA9TVsSAnZWagAACj0P/iUlAYk9ePWH9PxhNW/A\nBPc/ckREIocYNamgv2l0fD+qrA1n3acaGQsp7EOLMBN/eMAa8SnH7RFCOSA/\nvaD5L7iYC6ZlyDMh8l31n9QfoQumvirId2cArUcvkduG+AXCZ3Y2JqgkuZkG\nD6Xf1XA+84EoOBQHyr7ynkrw4/i64n6IU1SGyllcDO1ccuTCX+HY46uLEjTu\nUNp4drlkb9yZbbHB/i26rMFVOgMBa2Hlq5ADuiLo+3qs5hxOuX4BbTH7o3ot\npvutCr/9D8W5+dm2kU4ZbMweUYEHurcxK4L/zU5Y9ayL5NtWcqMw2cF0hFi+\n84TFVc3CLFum6wNf5ipLacufOXC2LcV59y3p/XJF68XUDdMcYp4e160esi4/\nYkmm8x+cssn4aApLdk+6DG+4g+WRlCglon1modj7mIlaEq0HZVcO5jMPcrI0\nqPAwm1WfavcfUiXoOIt0MMSU99aQu41O9DmXywzKm6r8f+bKhizsuc5Gk3BP\nYOtm4mI7Cpj/jMMtv95/uRzVCotGnqso9WDgwrqK7UXkRTAZVEG5dGa/82fS\nPzZGHcn7DART5L3bewqCKPjKTNEtRhuQoMwZzTTP+OREr1oLLcX2iZznx/he\nECS6CzuBcoNXwqgbbZX4R+oZ0ZSQUFsfz63mWSZlNKukbv0nN9b+rD1U3mTq\n0ahp\r\n=nmfG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQ3zMNG6xNAtGeb7i6fWjMgTTq1XZ6AnIhJ7pj1JGXkAiEAoDb9qGXv8UjJlA09XXr5CUPkCE1pI8IuWeKNUB+QOt0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.ba7a1b35.0_1613693638551_0.9545137907036447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.9a566dda.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-ripple":"0.21.0-canary.9a566dda.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-pnMCqgD7aNfu7TRt4Ny6Pky+IDPi/LwPWd9S6vDNU7u8u1GfWwMkbc7ITIsIHZ3zOKnNh0xSS7uz9rTC47KyrQ==","shasum":"dc092cedf49c93a667c14a22c118d9e25579a4cd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.9a566dda.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWQCRA9TVsSAnZWagAA4tcQAIfyCnxbZBJ13YFfqAKH\nzxpcS0Qb4dzDkHgTrrWZwNiSfKd8VF5p7NDlRW+xuMdGUvbvNjFbuCtYrUBQ\noOsOHF3WC02bDPKVLfHUlT2aHlNkDmL3K6sHUObysIWLbHa0PknSd9PxGu0L\niQFVgV0BmosPfagsl+QxaaUUvd8kH6RecI4fWB/JnSngDDrpyi8SyraVkbwa\nAtcLs15WDxClGe8pPxs2QW59LGiw1k4fcagSWpxoo/n5dGaYuhyjU2+vxmcS\nWv8F2BjwlWqXMgfIrNWa/IKveirX4WqJKhrt8xB1tV9VBoinGkWTkmxwgnzM\nMbHj7el0jTRTnbcZr+Vq7cOcN1TlbPPPXiDONSlFzYabZrB0Q9/xomxDIk0v\n9YaUuE21RAFk1SikXCg8yfZvfizwAwkBmJbzDVaPCbL+Z2kKlAVFEM35cg9Z\ncc2bN6rLTxwTshYrKC52jWMVtjKDoFRWvbP2GjZsVHDQOISauzTpcpNu6EDN\naZXsVl1HSDbCp9u84Q3onCrvPVehsHzN4pRb7lGwoB+2FcwIu0eXHqPvPrB/\n0lxUfZrsG+EHVy4mBuuRPMIOAe5S34fu+V/PRxwhPzTEXdMR4jXG8QZ6gwKt\nsANWbq6Ch0xke9skDcplD+/yifBK4fRQKjmcaLOcdNLjgWNM77RlpXLDlSSy\nFVQh\r\n=hCqo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCHoxTq74GRA3QTHLDS/0LjEqZU1n4is+WCbjvW0TdkAIhAOlMICmU9CuljVEavfqD3LCU9qec4A12XDDMaflRnmdj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.9a566dda.0_1613759887990_0.7793590697313535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.55addb8c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-ripple":"0.21.0-canary.55addb8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-m+nyvIQ4Jpewmyl195STaB6AXqiqfN4f7684LMzvykDMvBUB2wWIcqo+WXrwOljJ8Xr47KMnwlgkVdGfTjB+tQ==","shasum":"a0bdddd7cff1c3256841104887f2632d644f545a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.55addb8c.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVvCRA9TVsSAnZWagAAhrUQAIsQv9DYVkaC+Pa6Em4k\n13ofb5uS4/HewHvfJn/HPc4hNXkzYCdkpctWrqCMSBszRtTh+w6uL4r5mDLO\nUYbJ2Beh4a2735xyACIkgI9FbWUfxg6TJ9JCx8Eb/3MF4K3PW2pXzoyA77b2\nku97yr16ajcP+1UKSIWxOh/b+9oMAJhIhTkQdeyfyFj34y4AA63CqpkHHXaw\nZIETcCLq9DGIiZsPSEa3Ol6/U1/ErryryANizIvRYnf+M4vRgcQJTZopxzbX\nN9vwAvtLOWaBqRHrtE0SSBDqxXxt46ZBZymY32PBwXSzL63OaOnfy8IIceN+\naXztY6qFo+P5e2LzoGsx4kNebRl7bA5FLHutJxtHycNG8EWSA0j6JLcGd6BZ\n2a5DXJNiDXRrUW1Q51IqjNdhZrHRuGU8QHLfcuCzeENfgzuWMLPRKMuZ5vPr\n2hQsvnCUG4DQDlvWgP1KUgCRDpxk7A9/s4Z6RMli8O1gj4vNpBhtdCxBrnb2\nSOTF2X6/9gH7XTmJNwX3/dO/DT9h3eTBXkQXKJNaYnDVzoes6J/NUql3OzCk\n+F1GM6nHtXY6CzO7uY3IGHA61y41SAxThIBwg5kijr9ziKP9opokGUEfi+BC\n0NDhICpqfwHo72iWGXUyMXD5Evj1PFJwtZzuNOR618ykeCh7ggkM6mxkxYRD\nr0C0\r\n=1Glt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7mQeBuAnzeKwVcPbj+uCt0/gB/0ffF9BE0OwBHnnCiAiEAjKl76Wq8HzsHjavr/k88xQrJda0lBSgCMODPKb+nW+I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.55addb8c.0_1613772142582_0.2696608339344446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-ripple":"0.21.0-canary.85dd5e9b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-vBbpt07J6L9Wm4OLbmLd6MeB9Vgbhy5Aq4iz6HeKRcJ6U1ZdB0oxyFpRgzZiZUwCVBNlv1daiC8qZX6szle9ww==","shasum":"a9885683b3018fd88e4a23d9ff53d3a4ff5185e7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.85dd5e9b.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYsCRA9TVsSAnZWagAA4dYP/iL/9XTNsWFnnIRqQCGq\nqg+qiZTDeKD3MGd3slFidJCAJNNZiip7HKoXgYsFwME9VhKiMGLIf6JslAG0\nJ3JbSkBuK73aWa1PSBDNJkKbQqO36Ae2BgGbha6hrmXlQ2LeZJqozFxit8no\nvrH9rl6Gs3cR0UdACS4KJyeJqApqZ9Dl3P2P3E7OfqG1QuC3XNxfnV4vFwdh\n260BJMtXbwnMmRhALVPgv4lLd6lQ5wO4dc10SeIa5+2+XN44bHyCdMpHU39i\ncxfdIIlwz77Z1YNg7Es8V4CqAmofTGgtRpHyOEuKXrUlnH39bcsEm30LLwUJ\nhLktTWdeJkQ0DBnaJJxjoyQbYR+rBvfYVQGJE7Zz3iKiaySVZmyQBcNm6Ykl\nwxCZVjtxZrljg9582hYXefNrmtTO9/8lL/KhuEbHG8bGp1/X/zwVrkqsOYV5\ncwf7bLPjQkyyAoDQmZfC6kvoAP+WZRTzf/FSTscY9/XzKiYat+l3kE1LlXoH\nSDs9KkpxL/tU1yzJ0HEcIMVTopOluPxXaeVWiL+r1TGSA3MNCSAe1uYxji3I\nuI+9w3aDholmWpiRU3GzdO87UdCqKn76fwMdePnvlSU//a6GeWuJzHtXX51x\ng63e+RjtM6W58BBOOIpT0O8HV99MKO55A6AzF2Cn6FlOSobaNikpa9EJAand\ndlmH\r\n=Q8fE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnaKvRx96HYkXy5H3QHdf/Shx0V9DyWPswQVaGEynjSAIgbJ64Ij1elMBEv0H5wvRAIaUApEDzAoOvDi3gwxPSmVg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.85dd5e9b.0_1614046763807_0.21447668056820346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.aa3e078e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-ripple":"0.21.0-canary.aa3e078e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-WtAuQgRz40n9Nr6GKXkX9Wb9rauvDU3bWyqFtoWjtsYlADt03n292vm2HbE+2jEldj1iahxlDPsRqH/4TA+7dw==","shasum":"f114e89b98746953acf3f42f82a2506a1e6f313a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.aa3e078e.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgYCRA9TVsSAnZWagAAdOUP/R+kluPGppE/Ko1MzOEr\nbzDi2hZdx9B3pwfLulDmeDhsBLT8i0TMJDV+ZuS2Cmjo55ZERjjWpRUfs9xY\nzcY21wq/DRfFNI6IPj6X6TQsVI+ngfYWQWgqN6zBPfx4lFtVsW1aC93odzwn\nMbBov21r4iB0Ovcg80t1tYNraPuZcIVzeCbmXI7MLvn/lomzclu2UNLn68JH\nuCV8WB2HlPmectcVemVgw4aDeTuAf7LcinF54a9oMA4SqjBOI6s1N1chYbxw\nAqdN1gVo0DPSoEe8CVLNh03GRHaNAZ5g2hYbnaT+aQW5cf2eGAQMFLd+WnSX\nnAXjGpO++plVAE4natUEnDXk8k0fXzwhijWEWTwlA0/JAbOnrWdmOXbCoupI\nHximxKhCJhOz3GDl379cC0B/FjTUecbwHV/8D2+oIaZnawMxotht6Yltt6my\nwHXzVaPhLFbuGi5bQ37zLMP+yrHQ+OvvgZYbsIoUt0HweT/m1jNS/kNGyj9V\nZowgrJvesBM76WlVsibkSfvr0I96om2kaYFhMrLeXL3K+1TDW6wOYj/BVpnF\n2wTFdTUkMtvnIckb8av3cyLFGCwXnVtmiAgCr/P0XQ85DgB9d9naBg+AKt84\nZd4gaBY5TIwLZt4ygOpMNTjf+QZgrg0UO7ugY47M0V5SvlpeEoy8jb3yqsNe\noR1a\r\n=1MiJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm/O2S3xrVq6Tcd/7VoGSAwwWSnPfGOnJLajvFJe3D3gIhAO+ipX5AHkh6JOPuANolKPFnCMqi8W0OE1miv7LHMH3K"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.aa3e078e.0_1614100503828_0.7910561220250243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.dccd254e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-ripple":"0.21.0-canary.dccd254e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-/jRJZQUJvYg/tUQPeKstmIdJK6lJXU7njood+cpMpkksMeHlz/z+Z0zo1vnsqrLnlSW7zenmHn3PET5g/pPhzQ==","shasum":"d46d5274008fb4de976c1de49a00a5d084057002","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.dccd254e.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWO1CRA9TVsSAnZWagAApiMP/0FZHmP8x/+ExzXhsLh4\nsOzwWCq2j2bzyajH/PDbp/iPDGQaFWyw77Dez7uEPRRoDaNohpiwNUCOBQdu\nlwenSau0gKmwy1cfKFV+WV/zeZQJBPTC/8JRQCHRdoFj/8eFo20gpmZzhzt8\nZXBL69IEK+BiyLcC6Kc7mU4BTZK7umqxAthuWKnXRxt7Xy5Tuuqvuzffb3of\nZKqhQL1Ik17EpCRYALtfr5MTBK2yETU+k0Y5UuXQEN2NtVQT1d5VAnNFnJfB\n8mBMPz4Af55NQOh8jzIW7oysGRYJnwgyB5I006jmqTTFMTz2XHwRLAyztjYz\nqqD9+IOoL22qbV0Dm56TlvDXZy58HV+Vtj7bPpqd65IX4n1Hj8Q5JzN+QUW3\n9TrKMckh4XbhKatsUvi/VMcfyEWo3B2s6qC5gmBzJKPxKbNkUl+IjMwuTyX1\nNgsj7mGh9i60k0+Zx1Gm93MZNak4CrwBDNmKqRZUxRlqb+EfASxFl2J8NW4V\nYdyvPinFuqrUJ24ndu1wkrCtKky1rqkXPIjP8se4DGE+WHYXJdilIDB0yKJl\n3QPplXrCR6cqE0Wl72S1k61XXVmM3ZN8SPjgNouFl3hjDkcsceZnEfjN9k2n\ntjxDyztbTtBOFsxBy8iA+MSCzWeBivmtyNBTbfAvCSAH53Pck+P29eHtD/hP\nQPKz\r\n=ljDG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMMhWnGqNBWoTbBDoklpK1SlD2H/k1F+luQYTOuPRSGgIhAM0L9E46gbXpTzUYTo64vwZBldnzXb7Np+2t6J4uMpz5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.dccd254e.0_1614373813506_0.8439450194786182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-ripple":"0.21.0-canary.7dd1a27d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-CN8w/icDOmEhOLprBVZBGFFHl7zhcU1BPe5mONdhvvZ+OszJhOPkx8qCqpZFZOxc+ul5DiEQqMeC+vcNHnySxw==","shasum":"843e801fcec2fa919fadf31f8bc194415d116e4e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.7dd1a27d.0.tgz","fileCount":15,"unpackedSize":86721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQpCRA9TVsSAnZWagAAzv8P/jP88165SmA2bUxbYite\n5+Z27YP1rOT7oHom8pkPD+cP5CJ4lCKBhWL1gBxEGrhmEshJS273THG1Cj/p\nq9LUxgNldi1uLCi0GwZhmy1Hm2C1clYbNpARmOblz3eK1pFx8qR2ENt+cBEi\nCZCmeAfDe7OoNglX+zC6ENVcsiFy9i9Dzb7BmEfBO41y1xu/ghvhCnzuzaOm\nRwIkeaUOwgtdXXsxqdIXLxYkn35Es2J43WVCYE16kRjDjbIYy0mKpCktx9IN\nWvq2i1Ir6+RXKFRwXRupnUuF+vlkh6QIMrAJ+YW1O+AX26kdgnpP3zVZ2utJ\nSRTT5zKRApKSkVqFM9PhBSeoZ72+e/iUAWCG5BeGw6cFaP0GdJelQCL2m4U3\nbGjtqUC0FCKryN8/TSmUrEsrP+FFNURYOl27cjkAoAEbG+/4yeWuOGNoQJjs\nd/r+Qb5J8uQGtfOT1XupuEVB57SXQxlNbdbKL7T9gSlIWLRDaZDsrdJ5WTEf\nISHstZG6QUifEnCOv9DVuQ8CcRmnE/eJ7PGqCBMseqB7B4SlxVkBcIFh8Wv7\nCCfg4UwmwxDjmLySouwwIBspwgJ/qtRYmdQQrG8hkkwPCcJ9cdj+k+3nm7gK\nDWOB+3NgrcEGr2TjNnlJF4QdFFPDGqVj+RtHGk16kDsAXaOjOBCTqmUVrHbx\ng7Yy\r\n=fvQ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7axKexo2ajwjvvJRl2vdO9zRwXgZ0KJJkVIUnMmQ3vAIgQkthRA3i6eOqqlIWPV1mRXvXEAIjCAIeju8cOKzmQ6E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.7dd1a27d.0_1614636072933_0.7024287641345381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.12574572.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-ripple":"0.21.0-canary.12574572.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-goJKAK+uD3NxCVDI4Hoa9S2GsP0dJoYYeQeAII6jLSwIT/l+h97oQfTgaEw20fdp113DfyOeMMFhyLizpok6jw==","shasum":"fb0a6a56c2eaa72103e5427d70bafacb49457135","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.12574572.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAqCRA9TVsSAnZWagAAA94P/11Si5j0uNwyNFIFWyqL\n0nKEN3cXQJslh80aKpaSgTgZY4/Dqq6IoLu8lzzJ2MdVABC9Ho8rsss6ZHS3\nCn1xJxY/wThG0QqEKOFRxrmbkVbAiEpO3USmooj5OSBy+mkTBeOtJzHWn7te\ni9mFA5G7nSAsDTtj5UPxqsLvTxt1VE0bugu8lINKXveONhjbE17GEylmQKBy\nVnrbWdSOEFdmXjHJFo+/JoNnf675P+r6KQwhcTC/BnI3ZdNH0Ub/2O5W+YPj\ngrSmWG1xNspOYFflFgdjDFD2qRTFOhlPYMBhKTDSln4L9GjeNd1klNd+vEVh\nxGqX+BO3N3CGsjul5xL2wqtT1uadbUJ1wkgTTwbW1JN6RwMGzv9Fq3T5tecg\nuov5w6w34BKXm01ixvDW2r08mOd4eF7yh2kP02C7IAMiEsSYI3RWewnOMxlM\nhAgPWeE5WzaQ2WndLUJQLehRSIO95pUX/9bpvqfHRG00NKgZJauZY74nTDO6\nYQMNivtsYPRUvzA6/cmZKv4SdVelqphq6TnMImlLeeRtOjMlUVzzFmmluN6s\nxpZeoqGfLhTTFFcG8I28xU+ORWPNLm+eCeEijva4bAh+oDn/aCl/F3MIJhnz\nUPtHaPthYhspPUlBkq3uGTfBPRj57FSqE6ox1CoEg3R51RiERGUvdiSe9kKj\njY7P\r\n=AyjZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBMZWTMUwL+mGB8LvKDLHzY3zoQjgqbAFvPvIF06zqgaAiEAtSZ18FtOGgfLy3WB9DX0cxtbjJKq8PldOTTykIvJXRI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.12574572.0_1614716969585_0.3087004899371064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.1109a3d3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-ripple":"0.21.0-canary.1109a3d3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-0anm5/mhXSHx8gmX4UYgzq/dwXQWwiV9mUrm+/MjiMpg+7Ra0G+hKODHXcmXpkTG5P84ep8zfmGzjIH28zrmSA==","shasum":"910a317df8b9bf263b9fd3da23361ef66951c169","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.1109a3d3.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFpCRA9TVsSAnZWagAADk4QAIaNlntYspW6X1Z30R+f\n5HwpV0q1x+ZVSxZQMmuAbANzGz0QhAeJQBwY2no9XGmNJWupYUneyIMJppNp\nH9mD1cUPhqlQA0xldDRWPEtEMXahQPMWhGHtTl2ot0CaJqKaRizdaVUg3op4\n8Lcc1v3jF05NyKBMpNo5UFc1TmECFy/8mB/y8y9J5eusuw7nx6sPWSpy41WO\nyXib8Vlm9RyyIP9k0cLNQ6Zjl0I8DBLErH6VKxPx1qNzC+RfmSHwb9F6awRd\nshnvrrXT+0x3RQsUAkDEOziDZ8BeurJ21I7l+uli+A7itHDsAMDbmlS71+wE\nlGwy9O6tVABHmuA5+fIYw3Tm1eUd/iTfIt2Q99Ow0pUoydGavzZkxrV3C6AQ\nTZpMIb8OeDMn1PetAy/1rRJ3yegWOCw8AyisKwu00KhJae2rZIVFzI5W5rrW\ns3E7VskimqPx0JA8567mSIGZ6Z1o42dVtrZURlilkho4VsfSEW6rn58IJiQU\njvwZwY4sRhUDialI6xuqwkciSsZ+gYfYyExSVd3Mk3k8igtHFCLgvpnDz6WZ\nkQ4biNVYP3+K9BYMslTLDXvIcLycdYxt6ocE5A3qmTt5ePwJJiqd3SRfzBgH\nFtr4+Na/yLj/j9adoAF70HCmI8usB7Reu4oJ11g485+374BOrocV137cGyhM\nCess\r\n=nUf/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFcV9/JWFfawjUORE+l8Ry2GMKDABVqmRGtA4KaLH4cAiEAhMMsNAOpngcK74nOJTfPJIhhcrX4EdfV3COzX1MiJzk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.1109a3d3.0_1614717288616_0.9081023224869014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b9cd8739.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-ripple":"0.21.0-canary.b9cd8739.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-/o8UaDS/eA+eSEIGnFs4/KyTcHnvrjk2ZH0LvW4CsgeMId3mjQf32ZFFzPKYNk7Mwot9hqrD4pKaWCEFX9lIUw==","shasum":"514da50500c88b1e17e30ca417f79db6046c3541","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b9cd8739.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8u6CRA9TVsSAnZWagAAmW8P/jA8j/7PxkrP/miY45/Q\nU89CiZo8CZUWjoMqtc6GsfKLN4eyUWZclQ5AthOKALNxX1zpHtNccU1be5hc\n9HwLbUCW2Q7eN4SG6+yv1k7KxpAsUcn9dynCESQswxI3Y6FY6y44+6dzu4ar\nvk/6DrUNENSqQBIG2/vT6tAmYWN7d0+QRD2Rd2fX2pEP4O0UeKp7SYBEdWEd\nYbpb/OmOin5PPK8dK3a5CVG9S/15hPwW+KHCbwSmauRsALrWJFS2D8YUMMZH\nN4ZUcxMQ6Lsnk9vZPKOIPokZdeT08LTtlUAHhm9GeMbBzACXVP2PSoMbnDOQ\nKkQsNmBSxvOLgdIU/TILmRkQSp82L7c6TegvSxxL2jtKG4EkYYiziC4AUuTA\n8jfNrJCgDmEmCUQ3NwmZ/vtCmyfJGqXLkxO8+VUgQ3FrmVVif4WJBU2bxjFP\noA71QuVueuqvRKgdVuGGl6CVesLFMb92odCKOj9hbJeF5DpU940mdZ6tMNXJ\nG85HPay8xxpE1TgzlgUP9xGU3rIWZZJ+39QauU9J8MeaXNJPd6HFHcSJMliF\ntosJAZ9X2NcmprJLV+YR0lGC1e8EQEwAXKHXL/iJgIybNMqc6wua/zO+zgov\nHTdeq4d3TwC83Rg3H6BsD0E1G/Rv55NDgNyNSSAqByQ0LfSHLphngPzHlawh\nhz3G\r\n=i/Pz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmcnjs2eHPhB28eFWlLin/A++oJC0qnxkiJMkHa1FpMwIhAPGIJsi3I2uZ0TontSOOqXzuvQqV4giSVpmkOOWa3xnI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b9cd8739.0_1614793658275_0.36000066245682527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.71ee796a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-ripple":"0.21.0-canary.71ee796a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-imoiYqYwo+S6809BG5lqaDJ9FeoWSg76C9kD6ADF670YAdxCzABfVXlUtkVJTtgMOZlzQKa3R2zuS455+w0HBA==","shasum":"73187bc55024197c491fc3fc123c4ec84830761f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.71ee796a.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1jCRA9TVsSAnZWagAANCcP/RT0y3EYATa6/HviRoyA\nGIzMwuIjeUdj2pT+Vze0k7PBD6qPuJ2u9Hd4kXSIIVJb3Z0mLF/b68cjD0sy\nQySKj4dB3+P7eBV0nBDSy1c1FiBw7JYlxxL/0B/bBg2FKrJdKwNmUdrUOZ6f\njJTXmKNxTq3pFAO11gZpQnLJDCovB5eRslKPrUppIb++M6dQvdOlajAAR/Bh\n4WlZd+8MUM1dV4923IV1RFgzxB8jLUpO043J3jakhqxoaORLR4kDx8wMkoXl\nCgVZtzWgrnWcgVwXhKQKrGub1UQieQBTQjt+528iBxbPtlYU9Qpnn+ngaVbE\nJ3Ut2idi6OPya1QA3wWuLLLB+C6vhqrTuKsKe98IiXPpEJjiAk8XcP79oy3P\n9qYqx8Uj882Ge2fk/8pTd2CckhD7alATqeHqITNTNnlqX/T1LJFuO4DrLr8E\nqV7kyskG8s2keVcHVT6+22MUgHiJrB4GN+v1Z3ckBj8tstoWXCaSGs+fk0T+\n0VZEEtI4e6GM/GcfN5RgNQXpJ+fOg92JGlLtigL9LxJQTAabmbsPLCtHtDaD\n8GzCTqFz6AAEt+yxoqH1tPTLRSfiy05uyPYg8MDtVoMVyPb0cA5YqJJ6sv/a\nOUwYHUnRxh50de9Ey5EyQAgOmjcO4ojXAeSW+cy+SiuRSkBs1yrxVBx5GbBp\nf8ph\r\n=5oMO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKMmYxqud7ndvJX1f6qjiwG17jP0iBf7yZOkCa/zINHQIhAOdjA4RanO/PYsHELrI2MSbX5Dx0UM7yY8iFZs20wtuY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.71ee796a.0_1614802274832_0.4322366709405978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.2be191ed.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-ripple":"0.21.0-canary.2be191ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+CJn10egbZ4D3cBZe2h6FxJ136XkYgnqS41HO4j1m9d4A5/7vJkwRb9q8tP94DBbPmb9VNeAmMHbEqdUnDqDXQ==","shasum":"d65f7f8022bd32b3845037f0731ba6244a5bffb3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.2be191ed.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATxCRA9TVsSAnZWagAAPHcP/2JtzNmpUXekiiWDLWVg\nu6jbBHLgJnjdpiQAxztEsLEwhrw4ii9+w+GnxUAKYvmQ1ba3lTTcydsiRjcE\n4NQrD2/QSXn7F8PG86K8kosnmfItGpHuWhxVb2o0HCm40vAcQeLU2nZwmYxi\nCdr7V79gUKFVqC8hzaMv+tRFL/bUN99RVqqyTIoazRcypAv0x4ijP8hww0RT\nq/SkEb9ZeeImKKT3SoA3sz1Cxfnuho3zIbHa6HJXWUQ5B+ByV1mcnA26IBgh\nLfmeFLl6JA2deQntXUtLP9QJyf/FPR9IBV9Fd8Nc4Ylsa1pKkxX5VknfM25J\n8SpgLBQ+aoCctCWl6am5xvxIGgKGVYXbh2wRaMUPLZU+WGea6bGqQNnEVYSD\nUeZQl0eEPBP55k07bsmhewjxWgh3caSGGG9O8OQBdCJ75JPYgQFFM+/nR9JA\nkNWqPFKr+Oqyg9VkxsPk0liYFg4kzoKRj98cSUwcTe+mDyBvZiW6vEN8ZvOf\nO9IntgOSWoDQah0pWoXK9yt3EGJqqZgZ87ZFgd9fxaiCKtxseOPA/ZB9PCF1\nPZM9ZT9N0DCSbRUe/aLejJCHMrcyYwDESvsyl4cHpOwYuRdAIXuYQ4lLoyHT\nG4CtnvNSb1a+ndVIsZ2/Vj/Ryp5lWnQlRSfPmzJn5ASGEHnP4RfPs7+do3Rb\nz7sl\r\n=mAxq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDntME80pJuK6vFvOAreRAySsoZb1tVJ6Npr9zIH8fLfAiBuMuxpo59tQ/5jqupaUg+pmZIj421IxJ/2y39p2DZl6Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.2be191ed.0_1614808305158_0.8853909757772442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-ripple":"0.21.0-canary.6dc7b06f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DsQaEKiU542H4ZNyg6x8XOmqgE06jb3ZiWYrE8q94QpIt62z+HsLG0KIPmDRrj8M8rPcsMc4WZmfNLfrM2UEzQ==","shasum":"62263591414b9f6932bf3a92c5a6526b2ec9dbb5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.6dc7b06f.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXm8CRA9TVsSAnZWagAAaNYP/inrolj2kXSNp0X1JSvh\nIysuM6as9VH9tKYrT0IZm3VIk2Nva3K7A6KLsik6uot752UAPdcStGtBu/af\n9loTDbqmOMhEoWR7fSSiPkR4ig/6zunWXLNQlXY2m/AELcBI0MOMxmD/NgO1\nO3/ONLL5wijOVibxleh8cvWzyOuGV4CCI3ptYlMYKJL4GJ09Z8BziV4e5TWn\nUCrOyUVshlQdT+BG10BQuoRF/JpMxVjehHJEJf0f+LRxHe+o2qznUkL4cJrt\naaXAyOXt1BOO5oV3xyiLElxlwPpRgqg4WRBuG9BmAPs4Ym5vbPm5q1H8lNh2\n7RhnhgYi3JiFV2ygu6JyjF5vp+2tA4hQmq3f3U9YW9niWcMFPUz1AeTndaKY\nTip2oePGj5yjorMM0Sj4NTdMudaRgT+0GatAmNLamiCe6bEB2YVmR0DyF0gp\nKqmwk2DVTke/Sd267LZPeedYAHYvUH89+091rKDnFPsoR2rsfXKSHfQrN47C\nI161XscfVJ0i9rhuf6vA1HcAx0NV9NHpjtGz1uMEThOuGJvbCLT+W4bblTUR\nZ7WoHDe1lqhmoq8ZFUbi6dJ6D0Jf/WEIbI2GrRQ35/1tvNFXqXqPkgwO4KVe\nl0okW29XXCyOcnhQ4Ysp2AyTfqBwasMC20qyzvxGR8M1sQ/++PLTmU4izoCU\n3P2U\r\n=kX/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiynDL6+ajzoInzxX1yHBqiqQZvU/Hdhvs4NMNcZ534wIhALAQ2SEih7saslpMB2ZS+/6X2f4GnPJG/YscEKUysY1H"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.6dc7b06f.0_1614903739881_0.3174624941198996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-ripple":"0.21.0-canary.24fe7ba6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XnmB8Wn4+i+WrB0QihDqtwHEZz00dl0Ty5wXUSTqRVjbY1CN7pxyzgudKlRd+wtoV9s17eNt4tPPVl4hCmlLUw==","shasum":"030d56d6f475093fd014ffa7a077a0128ef16a9d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.24fe7ba6.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnwCRA9TVsSAnZWagAAPc4P/1Tv8b8fWa65aYIdTRRs\nuW0V8qBGU6to0ZPPPmtJbOEpcm11eKbuCfUxL0qZxd0hUFMgrL2RTYjatOTF\nEv5YbG6vT83QDqdlK1Q1iwXupfhHqk194hKqJ9dLaI6DIEMyeTFEyA5vfFao\nVw/0SplpFZI+h5KIB3Xt3PXEQc2YX4tg2GHZM0854slGRkLI4NheaA35FKFJ\nnu9KfwlZaerCRUhOQimUgCf/8DziCx1UNkcMrjMVx9rd4rwGqXcasMwHTSrW\nXaNkhHtQzaPZ0bOFqdTI9GxuCLahyjrAfxU1dXk6EaxdxKESaczM227Qvxjk\nuK6oumrfiJYfuby501EIup2zFxd4U8PFTzrx1CxSRXL1H42KfA50K1o6INRN\n6hM1Qu2shqqgYZftny63vjD1oN1vAW7f/wxgpDf7Dgrx6tEY5+mlPc7RCLEJ\n7OWR186l+b/cVgqESUdthMcIXX4LP+E+je5ue4RtFrO4WzCAjB0D8LeqRfrP\nQe4E2rAxX9gE891//Gh4wXd9bR9itc8KeR7FsIlH1aJTgddTy4I7YPp1yXVM\nISA4LI18gSoC6vQv/nksKnP9DkhXuQqz2DZUNT2zsX0WwyDIXSxIQO1MtcRo\nEjO2nX1b4qNsccghz4KYG9RsOKDyglUf6c3z8jrUnloo/0V7oB+EAShySaKe\n7KdJ\r\n=UoGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNzHWCCsbSuBLHzyeKbW8tepPQTUxVpYMXq0KiFqJIPwIhAL4Xngb3L9cwvShRBE6eDaMyOV1ixq34xiMwG+CD60t1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.24fe7ba6.0_1614965232369_0.901222507255395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.12c477d1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-ripple":"0.21.0-canary.12c477d1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JWb4C0GM45kkydKa3oNE9H6vd5WSHKOSrWQ+it3OYZz7bRfzBTE9lsjrP8X4z292a6hL3HdswfayZAxXIrbP8w==","shasum":"4577432544957ad6d3d58bcd1873ff217d013c49","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.12c477d1.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPpCRA9TVsSAnZWagAAuOoP/iLgptPz81u541W6sWRl\n+WMsUafKWMdB7jsDfk8NxW/VXx8x3f1mXvDBZX90h67Gul/0mfKSWhRjW1Pb\nHfo/jC7HMGYUWHY+16Y9cBdJNGYNIu+36bqmrY3eUThaCZeHzkVLSNxqIf6B\n7f8pYOS0agBDPMXUBI55Vz2Cy0BulyuSBWGE5g/6pk9GhNlhecUXBdFE/bfL\nytTaPyAA0tMzYmhzYAj0Rg/AcfNBTb080rc/ekGccVJutOu5aCJIm6YqUi5P\nuwMByQcTxl5oX77v9ZvtJjX4e3K8lsQaM6RsEgFQslq5GOnNCOzwkg8mgBS9\ncXrxBxNjFT3IKSoBl9qr4tc1WK4H48UdEZw9arvrmIYggXZq6Jl9HndxhoBs\nLFJf5wJ2W7epogF9w9w5N4ksPsx5IAlW8YC/XBnFNF8u1kA02XBj4I2oOdBW\nDVetFxOL42MveT9RGRAy6RkLkX5GGhd4YGNsL/P5KPcgBFFa4hdQt0UY2M7I\nzyXvG+TYczU/3M6srRAuMrQ3e2WtWalbkxjNUviB+vc4pKge4TMgGNZJf9AR\niBiH7f4QUAHZCncpLMDvqiJ6JopIlLb8WQ17STAVv2SZ34wdweA3uwSyaqX7\nqKbTQ8cvntzvvFJS7hHtsoDdouTZtD6i1xTn6A7q2DfRCnOtu/SWusGHT4Es\nK8NC\r\n=wNEO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuBQ8X0CySG+z6vV5iahzz9Ig3asJy29dyEC1jleApIAiBBdY4SEJjjWoCjbdMKp4sY3tYR4a3MevaPM6oYTqDBlg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.12c477d1.0_1615242217082_0.19318442924212498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.4c38f801.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-ripple":"0.21.0-canary.4c38f801.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/9+y1k+TGzIb9PPmFEf1Exg3vgvcpjQzAoiq2wmOO+P77rhxzQIwrCjePG/S2xaGBHzRdLASUt//WCurDZjgDQ==","shasum":"a00766a2ba37ed7c5ac6577e248b3976d00ef605","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.4c38f801.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrI7CRA9TVsSAnZWagAACAQP/j1oxJY/pfSKvZcJhvQm\nOYqXB42u20kqVMmKtyku0xf8UxIALKmQIemC5omPWnHRVGHD5AijuAI1j0RS\npC2vrfxOngFeyC7yhnlaw9aZ7/4NO9OaJA8SDN1VCo6ggQi653txvS41yrVU\n59X0C42BcAnxlLV6QzwpWYXpcVdoGxYGYKGE1Dz75gHx5KfxroblbE7RqCqY\nQxK5tS+uYDxS1Ia/197v+aXvMhnIgblpfQ8+OT5c0hFC2eJCvoi7PHzVPALX\nzgSApXhMm5TCUTNrBWFy1ErXf/9Vse67T3uM8F7vwhRm4+9ew2UNfgKhoCuR\nCcG5fsV/BA7SP7kEIuGLb6f89HUCiyb9WZOBTj68tnEU8+FUvZcMMkjFZLjD\nbbg49lkCz+MEXmxGXUQ7XGTumQzQvtum39bakSsViFDC4+u7WpHdlKW5ehdm\nUQsrhxqF7tT/nmunjEMIiULTpoeYOg1dyaf3EI/4aEJ5lnwbR17bJE48q3DB\n6yHn+KGR5r9TOjxrv5ERrBGQ63ASnKapEc4x4tOltb7rEeJuPMNbYS2xhyVn\nNPThvgaArHyp2zOFayQlvHVlnYei4IFiYw549j2ziqiLmvJKq1dnZ+Y8o+Nv\nY9o15YYyJTpTUkCBAJ8va1pgCMZ8pZm0k5ewsOgnif2KKj+l2f7O0X1jHMq8\n+54s\r\n=X9nZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsno1nhFGSIbVZKiRaNeFvl5JAWKtwfaUdSMdPaqEXlwIhAJ+v1hg2PaaCZN0FfOCcmV4DNYvLXf6tNq+F2JJZVFHB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.4c38f801.0_1615245882875_0.6763243171400699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.8795b83f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-ripple":"0.21.0-canary.8795b83f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Zq/dZR7vbINhjFHKEhqYvAUy+OQ7sJ4SEt/Aw1RzrrURyssOtP9lMMvu9FbzJrkvPFlnJ2vc0qD6tlmWa4dykQ==","shasum":"cf1eaaac2e886cdbbb6efd033e7e9c1907f330e5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.8795b83f.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74WCRA9TVsSAnZWagAApQMP/1tkTUDJaobWA7NWoNUM\nCypIhwWx2LVtn56Up9yxa7CIr7I8ZdoChUvQTIDuINY0pBbAM5u0KYvvz0aC\noE1SPJmOKUinWetu8MNoS7afmZmiqwWHtCezYEMN8SoqW/7jgJwuvQcHeyl0\nTjAPWA/mfsbHid8mWymGEbQWJlWvaqiF5yIBT5hAqvpZLFGjTCMK+7Hs92f3\n0ro9VTDj6tj39mOHbOizmb6WbuU7ngopq/Rb3jXK/QODkR502npcgLgRFzCM\nsAkYqxhalOovwMNXUGd7Gq1AB6KQFvZlMs1L61leuaXN3M+we3zURX8Z9sRA\nkRa9dGWpnU1frttGn8oKaHam/k77yI+XNmbfANf6A47zvW8th4T2AJmworss\nZcis3kc0eXluJXSeF5ct3KiuxurtCkDCeDA4JnCsPLB7h44gkdLHUCae9ujy\n/H93NkWk5YFXmDUCNeZIJg2NnZk0AvXXQ5859cC2I/03DXKOhYeQxSdMCHrp\naAZ7mnRugKVWWgEoGFymqiW9GVDvMdwLyYVnih13aiNyUqvSF9w7mP5yGJId\nHK2QW9aPA0xx8HZvrlgW9wHKDGwd/r0YLJy3sp9RQtrAxi5pJIeIPbKQBOph\nJco6w3Yxa1BpYGhkuLPSYK/Jo5lHZFs3niYxB9qIgKDlqLVsHLxmgZfzd007\nvFnB\r\n=OCj+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIuy6RAiVSAXjK1kOtaP8Suc8yr6wF1eJxcfcFRTrWuwIgGtHSzNelDchEcFLEnldr8VbhC2/ZxfMzi27QI8OWqq8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.8795b83f.0_1615314453625_0.7931943995532458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.12b84cb7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-ripple":"0.21.0-canary.12b84cb7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LR/muEdgFZjnhta9X2ExnnrDDq3+z0vtxgBa5Us8FxHkge8YGDu8d1Kf9gKo4cBjUph2dLYvxIcGawxxGp/y+A==","shasum":"ec5a43f0bc685a75dc438cb3307284085464abeb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.12b84cb7.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWsCRA9TVsSAnZWagAAVakQAIq9txfK1I+l6QxpogNq\n8kObY3xOY60oj04wVBcZVMPONQse9xtghTwuwPaP0FmOJOkFHQF7l9elnlD9\nLgd2irDxfuHc/vysNNnN4lEgGiQudynyETDqBnyVyW8pHLEO9WM0LiPPyl7o\nWcjJOHA6zP92pLkkXkMQqA8USSuTLpRUyLEanQs2iIEH1WMidelgH17DD67Z\nVxTUHpwX7eDdXXgHXpvxr5CodLGT1S+gltqQ9Km3EEDy/kkD1JwzSVsD+dFt\n78FvTtGLBTwnR1YSY+J4HKuZk1gMruGxY0YdNwjC2IRTtpyV58H1MuCk+Su5\nJML3MuaRz0pimDK6HVLnF/UTqI9eRu/aX8rYZdYjlDEbqcAwLvOcObX1AZWz\nGMClzCz5JM/mnd2k3rhaIRN4cr8hd2/rrU5IzyWhm/US2s7JWDe7r+prs4B4\ncTCvjvQunfZl8c71NpeMFsY5rIxr8AxHD+LgGPqAxqOyJ+Sw8Z9Tcbf+Aafj\nikueqpb8lZ42qJYjnoynqNeap6OoLyb1hlvhLDauWcMUsx4jKg2GLANY2Tyl\n1XzbOw2NJ6dX/kk9QwKk1I4kSbPGxSlwfBOdlJ0l+k7aYwHykUBT1ljSme48\n9AXQN2BVYXO60cxNkAndLyjFFUmSVIgyOHji/9NyTOFM3zjXbTD52EcCPMr6\ndxHo\r\n=2RDf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyMJ9FZcjQ9vIawK7OONM83G06HgPNDN5kQpgei4Y6lAiEApVsF1vmyHtXPjp5pZNC4ELLgSaJrh+6St2cYE2jjnO8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.12b84cb7.0_1615336876408_0.04785646036045277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.6ac6784b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-ripple":"0.21.0-canary.6ac6784b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5edVSjE+TcEfX5m7JuKtng7ij5a20n/0oo8FMvMSG/nuLllLTiPP494MnI4qAvAgCqgrHCwBrCOj1olVzGdBZg==","shasum":"5b0c8d38bc0fa66a9fdea58a78bafd063f914f75","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.6ac6784b.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgPCRA9TVsSAnZWagAA/IgP/jJpIA3KYASiXKZvx8jC\nkpFmsQ2M+1q8fTsz4sU1KtRo/+5gynceBCORZOToTgO6rZ5XFnzattou8w0X\neO4pT1EjNqy5BBz5ams3pSTQ/+EOmYjQ9olesUhmK/Kd5u+V6FaRHYO6S1TG\n0tvPWO1+yIiWY92O/q3DuY7fN57MB+1VelFBe/7YCZnBj/KUvOAdsS1h43w+\nkVTHw/QV7teBqb2chP++DDlhnqXAuFhwQq/y9qpillJ/2Y1qn7Mkk5aE9JMI\nasSWxKimX6ufxM9E2w9Nv9eyv1Rouy3UbjPnVsBB6Q1ahlx0xL/qaG+UX49i\n3UOrvTaIxx7riCKlntCJMWCx8jKLvqVu/SmZywtCSLbTbrAmPSBRz+7rjUBa\n1Nd9OMym3FB84o1hScNSclDfWtoNLToeWP1+ub/00sLLSC8PHuLFlc5EPGwt\niA8+p+HzWDOnLCUSOLe09TF/W8zDCfFM9PxS/Tqdd2K7aB6z3flmvWjISI+P\n3jaj0chiyNEP8YMaM3RqgkaTTe/k0KUGbId0jrX6hWV9/yacKQwwYYisvu1W\n31qAp2Y+WRpwDY8GIcTvkBwZk/T1ahiOoG8nOHloYSetziCILLw2wW7B0wcj\njIfQnxwp2wkmAsIur/CrP8uXHeDY00pPUQ/mcbi0soKaGiFtn59AffJJJ+24\n256k\r\n=xAkd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC08GDkR4YWlHUVrIwf59RKVykQkT74f4EL/vuWMSqWYAiEAhl6uZeKv/RxEUNOBLsKJr46ve0vE3zz66q5fH8kh2HI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.6ac6784b.0_1615337487255_0.10617729420448807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b6d92934.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-ripple":"0.21.0-canary.b6d92934.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7p1AagZK/Fs2y/ABmJWjsRV/WsEbawUPMnd8+ZRSJFvKoBZfA24TURKajP4vd6c44dzUuIhkF7LbzYjjZRUU/w==","shasum":"037b4184f384165a362824025a4834fb2b45d066","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b6d92934.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGdCRA9TVsSAnZWagAAaM4P/34Au23bndBvN9+KPokr\n1kDJii4QrzSkJEbB8t3gqJ+pmM0MvPK0Bi770m3D48nfG2eIDgGwRmFz2GTg\nk5zSJv4hHcxUBqPIyEcK1RQWuwkOyrphOK8U+ldiiCmIQb6mFXT1OuMdvp1t\nRV//xgnik4VKRYecMSvwJCnSBPvgeZ8SjaQ6JSLV4rlfDdgEdFp6KUqvQVmD\nQiIljN7Zi1cnXdEWDj2qDzxfRjgW3LtMfszpZCsZFdZcGos3RUbaACTgBWjt\nXlbKKt4OkcG3HDvsFQeKkVBQKANYVOKvBuk1B8pqkqIUuND0yPgcw+PZAo0D\nONEuL7NNa3J7QRyqc+wp5uTtj0Lv3HbHmIdDjsCN4lYJgpakM7qM+vBvqzSr\nDXil70HEYkN5BSVh+lnLoDx0ArdGCp4PiPFPKBbq9dBrwzg2cHpyOuL4fYCP\n92OlefPDyp0d8r8hmfXWpAG2zG4k6Ie+HWmqHml+kjNwHnWv6rpqNPM6dXNk\niSVnn/ePrnlAeT+2LQcxdJwA6x6H+qM+BU3Z+B+aSC8Yy81nCn6erICuDuWG\nPcn4uF5rLKGPk2IdKG0Vpl91jQGs7guo7rj9e6V/or2O6ofFE7qukZRMeG0z\n6/7G3z2Kc8B+isNKtXeWbwVKIp4JznNuHIj85mnOzbueNYtL9QU7MikCc9+N\nMOww\r\n=QIHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMWot9hu4/3HlmaZSu4rL/7UlaeucgijSQ2kEwpC5nKAiEA1SgWxEOnNggaW8xLSyaHJuPCq2tB1hvkFwCJ7j9Q2V0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b6d92934.0_1615413661352_0.9092757480901388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.99a55b9e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-ripple":"0.21.0-canary.99a55b9e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sPtUkIgd39kR7jkDZl8oP8oEin8wO+GqurA62+gQ7M4FnM66k5VGBfH/HyIRvNbnQXCRFIMljiV6v1j2UON4zg==","shasum":"a3ac6686be2fa3b0325e6de2d0539fb10a4fb762","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.99a55b9e.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2ECRA9TVsSAnZWagAAuB4P/jQcpe9uGuhAz+YMYI6r\nMIu9k5VfdlNLDNfAXcuqwLVABcrajNLnno9iqkPrJRzJXrNAKf6E5zLSnQgP\nAAP5jApgdxeiysITUzOb0biSvYCwccS//2lh03/uP7RwoT9zEyVQTtF7hG3Z\ndkTfbKTId4WOQY1zS0AYYzVU/kZIiqNPF2K2V6vXZyfK49sg8LbKqNL6zrTm\njcT6ORxQKLU9ucuMo256Di77mO+JIiJqdXDkVvop2wG4FQr4bM13ov4Fcilk\nYGGhLE0ranBN1OfE29s4HZsB+R+JZGY+OiMHci7tJp4oKASfPRaqPKZteyS1\nYH6QztPNIg3ALDS+hOnzGXveLRyNGpnO865n3jhaX7Oh62E7SFF5qWhVVHqy\n3z1YUzanFKYMxSBPe7iNrd2+l88uzaPXzT0e0DgIWxlcYKdaTO9R9nD9uMH8\nJ3qjGleWrOj90dTDNISlMKex4Waiz+rZNKlrWAr7I+ZjyowSq2qLqp0Fl4Wo\nWPibCQ58zFrJjL1aRy95RGCGA/BVsLyUoRhnVRYPuLLfRH7dZc9ICp4A3XPz\n2IgOyd8YhlC7+gfcCP2P8YnxWnWGrO8PrkEBFbYRe26jkt0ok4QPw0O6GZvu\nyEWhzZihIb+GBsjXWetXi/1hk+w4IbBsswW7EKTHSw5kbSoDE42ajIuTIKTx\nDV9A\r\n=0l1S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGepf+WuWTy4Y9lZRO6E2t9cetBH0523lMQBcoVzgbuAiEAt5VVijXBdRaBUXx5LeOhhPVpUENihL093xNAgjrUJxE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.99a55b9e.0_1615416708327_0.7893035800382429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.bb14efb7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-ripple":"0.21.0-canary.bb14efb7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7F+3PPB9rw0IFqRFvITZUL0C5CpDtjS2YLhC8kgPcDUOFcDetEP8y8c4kEZZOE3oSek8Qh12b86lSfPCbz5OOA==","shasum":"66665554202f0f64ac6666be5ff95c7cc7515126","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.bb14efb7.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgxCRA9TVsSAnZWagAA3bAP/RShYQOQJAJw5TGQRQC5\nwN5VQXWN2hg/Qh4cP2a4qHLUfJVuvz/ANGiyWr+puhSJXuVpmRE91P2b8V3T\nF/93OkfxmVuLJJ5/meLii/TwKVk0+7Ms4uNWUw1+axGtEQdS+p3xhZtBcw70\nfmp3qr3Osnpahb4Bc7+7+K1TQrv2K5lnq0CAD9VrDdbdQUhnS4qBtpg/5ah2\nU8im32vStAAVZO5Yn3D8G9dq6REj8UheioP0Ie/T5vo5wbwhs+HOB+g2TsTI\nfmMzrbO2QsbmfWe/G6NZT1TgrMP5+WsvUib4y4VaaTeGtMdEc8L875HfRg/w\nMgq5UIIIaWuiQ+tkQTekPPYXRbtIjk+IcPYfNTK/CD2NXqWbcaj7c/q5nSz/\nIkZqnv4oCN8yTm6D+qvay7EVNzbACSrpGTDSDPfFqGUgSXR6AYS4JYXlC/h8\nxJ3OPdR/oQj4oHHX3TQCpDlUbuKgekFeH1raQu+6tEWgyMM/xNPt1JvGm1JZ\n3SEXqC6dT/K2tsnNpc0o6uzzbMwgHKxoKjcJVtLjke3JHnXSU05X7zXxVuuX\nbXrBfYV2leWQUjBu+O/UGfUwUep5hlPA9oe95oDKd6lRSuBjsfMtjsnfoOrq\nrFMp+IlJ1H685U2zj4OSCaI6cFjdwS6xIspo+cnetVmyYhflyB4jlXk/Zm21\nwFPO\r\n=4i7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/ijwqHs+P8TUStAYCVPjXNaEG5WUfep3RBYvsseMhFAiBZitNEtsyHUwtZyQpcAt1hG1efBoT8cCfsOT8V4STkNw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.bb14efb7.0_1615419441118_0.12124898717690846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-ripple":"0.21.0-canary.9ecf3bdd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jlDezDj67Z0wvcvcd9ubB9f1ETXks/r/+ZNeqRPozOBGv39HqyyRCVV9kK3bllRO/CnBvM2HP11BIBTWvJoZGA==","shasum":"3995a414ac60a9c79d434caec2d0594e92860975","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMKCRA9TVsSAnZWagAAVe4P/jnk8yWgNxjAJ1DI16LZ\nzAm6jFLwirx+tDt/XONqmFqxI2XND//AvAZitF91sIsITQfjXhl7hjmWpFca\nddyyL0SdsXgwbyRCYvET0OOsnqLmr43CRX7yvAbqJYom8xwM23UPgpagAeFS\nyumEdJ43NkD3v6gitH8n5HePmA7eNM7DVlh535m1IkdC3C7VsWOl2kAjEWyy\npZzulnaOqaWlw3qrFIyVzH9G9JJOz6DIPnpd4iFMByrOj+lr4uRyHA+qfD+s\nl09XOtFhT6kRDl/dPNg45o84lzGHLYJO2RCL+leIcaJ0khAxYeTT9tpr/ltM\nc0Neg9Se0P4n9Wgbl0vPwnCeNcgN0g0OKqfPbsSdcfY7u2qQfXQlmWzagj2+\nmJ2ReLFEqBTFWpRRAeXaJjBYGEFXFDE+kAcNGROEuRlYkEls/d2m7lqC+eSe\nXAS2uXAHRX3iKXhkluupId/Yu1WlutBPmiUZK7RK3KrUsBVCTxIh64E8WobL\nmNFjzgFoS6KFbpFxzpg0knbOgcg3Y8Ew3ihGrQD90rqFEAGIZAhDADFLVXsk\nhBiIL79Z0nOu08z7ltrDVn7EFxO4FUYFC3YqPvYPOq14392X2ZokmvlpmllY\nrcj5DXU2JW9vPFAqejj38veB5SuM2nbwSjPfLh3hD3GLXHVEo+ZSga6VRm0g\nMerX\r\n=2pQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSR3sN7EpcGLdw3f+NWu0njRxURAmVoyaMgXquMmXrLAIgVWNbQlXL6KvPOh5iQ8uCt1aPdjYkMs93OHaMqZGAkoM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.9ecf3bdd.0_1615422217780_0.16346793907087953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-ripple":"0.21.0-canary.7c0e02fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Ws7waaBFnoinnwAREAgpyYzAdrVKH1MS7Iu/QxuKNEjO2pJ3d07KgY1pn/Mblma/WF1Ii5XtLNzcFiaoOpRc/g==","shasum":"11773bbb5aa8a132d76e430ed510dd4cb73627be","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.7c0e02fd.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaGCRA9TVsSAnZWagAAPUIQAJvu4NcYHbXGASgURJJe\nNH41361zBFuepsgmMJ1mZ3ApI2wDIPsNzOQj8ftw1d0raA60mkXxvjTDoTW4\ndEnQr1RQJqzwtdEfkjIphqFCV+IGPxVCiwHFIMC0wIBbaGCq+3TtzuZMQgwm\nFW7CuBUe4BVh/9P9Ki2b135DU49HDr5cVZ4UdYYdxPUu7pZOHzXn4MAMwCgM\nlnbWRfyN7DDzrxrpHECOwP2auiAOtCL0R/899mcj1SxAkGJENWfO4oVf82/E\nMnA4PYn/cZ5jTRTcuwa5M5xCFZMyFsRn+tiv+utdkNzhn+9hXnQjKhfpQ4Rs\nCUfqoY1S0U6U5m35vXCdmjPg4ui25WvotUHB671T+KqjjCXFDHvSNKFFkhfM\nXc5ZpLfR9fQCODGau7yVxf2ngfrvH/L1dO4UBRVcznIDCZdzN5vOHjD6JZ86\nlgUAVY/u8jeLgGtsQMOQbSfnkiIwt64JMLyB8EM0yVG6C1klFShnwYZ84kNU\n49HEGhb5Bt4v3BjiTEkdo8wlDncP7TW36JrtL5WDn76ik+8CywUMAoSh5kj2\nhrSnaHkOgPrEgb5nMzihycODGJ6d6Nh74+9Au5JUUToF6Nc0+6rigdvMvzvy\nFgUtVRFQRpKP+prV59QR8Yq402E6hs5WwI25X9VbPfgLed0OBdCe6xe4q+4Y\nrRUC\r\n=KyJp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB+2SLHcMewA7wKc0WH66rCiKM/WxtxLs6EujdYpBcvAIhAKJ3RbBmgV5kwj7WFNDwpoy7FmK4jE8mx8VwOnv2MPTK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.7c0e02fd.0_1615427206061_0.4235121278841407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-ripple":"0.21.0-canary.2d6d59cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dw2TlU9hAy28Fh0MAYMibGS7ueplK6iPUdZTbvpYIj5nwWAra4FtPp91PwAd4QRKh71HUgprhbdgxgIfeZz4sw==","shasum":"69399e99d1e33b623a02f5a11018c99ac932a2c9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.2d6d59cc.0.tgz","fileCount":15,"unpackedSize":86739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGJCRA9TVsSAnZWagAAJZkP/iReAVeWgaElVTqRxDrx\nxy/1e3tZ0phaU4XvEXhVNI5GmUyVkFYQWCswhJNjy5Yo48EPW7sKE0vjevWm\npVlGjDV69iHghkSYDxnU3XMWawmz+yzG1RoR4fY0KRkq1i7S551Htb1W4dSs\nB9NA4dZkeShL72yNjYCOMfhWoDIFvzf+q0cb6rBqRGQgWPFsdWOIILarzMJ1\nY4xDkgsrMOeMGYu5aYf6BQr39s36jt/N8G+UDQWc3Iw34LJnoRVA4PUOCH6J\nxT0kryyU1RHe/nobuoCtcb6GDSSB5Fs/ct/ugxBn6Ig5cSPDVrGLQj4W8v17\nSIJxUo5WEtK9ng9u2PZsBqK/jxMqGIcj7RMm4hq+naiJy8s90tlgtv2L4h0E\nPBp7VQcPO402QnAhCwmaiyHZDx8RWgPhQVuW3+tJLePU//9uN8y/YrXM3qIQ\n6l7+E1vH5dYCTmI7wGO+ktvcp/4WJAJBVxmgwO0ec6vC8LcAH2TsRWHBqyGg\nnq+q6i9Edp8s/BQG8sd2o3OHtw1IrKxnmWwIGng9TMSzEmWZ959V4RCUV9Um\njJidLatDAVbwT5551EtWrpA+0IlnwY2BYCd+19VTw7FkyUiJDMlucLHwpbJS\nDviWVbKHWk3dgw47SvxsXGNZhbcbH8F3VD8b8HlnyqCkvZZeGBahD6EA91Jw\nwAYi\r\n=SH+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC19cD6e/xz5gyv+wE7xP5ghGggraL7FIoqO57eveTwzwIhANWwiN2jrF5PZyqPn+piG7K5qoAQY68I0JM/kZsgHavv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.2d6d59cc.0_1615487369526_0.9956987938888446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0138863c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-ripple":"0.21.0-canary.0138863c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1oLiYF5w/MgyFhFWKf/sDLKb4eaUf7AHYp56AB3E6zy5OnjtrglEtnrT75XjKWXcPcGFRbSqZXVQgzM1Xn3SCQ==","shasum":"7b4a166da49ffc0fe842db11fa98c4151c3b80b7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0138863c.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNJCRA9TVsSAnZWagAAOXEP/jPO7SDGCXvR+zIb1Jzp\nsixA0g9Tdvl+tRWeg7GB6qoPFPjlVaOo6VeIsJh/UJy+TEqSgOlhrLIMVHhQ\n5Uo0DI/R1YENVxZHbQBhJ+j5OhJNMSBvD8Rwqyx6BwnT+nCpB5t4nmaFj8cp\nfpU/DlQQ2y3dJtFP4oVTPjsVPsJLrxDnX0xeWsdjozXmQtApA5RBnfKV790V\ng8azhqRX6z/0IuGpIE6Z6s7BLq3Lo+ifz3zoGgVUlp5RYV77YRtQQnRmFBKs\nMSdH1QVAGCtb8XzNf8cH7C7vog5oJWpjlmJq9jw2AhEwqjH993WFVHzSmkqr\nu4HgOJmS+bdqrhctBdsbpGa0tmTDGAuO9KagNNJQ+4fiGXUnWvR6wjIV+YXy\nJPXxKWr6myC+pUnT+yO/HMN2O2l3YUpJM+l0ly9SnJO+plidFGJkPRQGag10\nOXAUBXzQy3wBPZlUYZtwiBOCLxYxkzXL84/cdBTBZ9eBM0mZqK3sQsLKJ6zh\n4KkMEnI5+z77E59Cw/NB1FSldCH4J9VvGjxZbR+e7BikeDhAq2sYuu75cdZt\nCJtB1jRVBQU+2NDIsD9QZXtxoelAP8dG9fFIfq+r8ur2bekAu1mp0j/iXQZE\npe7o8h/wqt/2dwqYx7K9nekDr59JZIyt5Ke942CX2RLdC0ZNJ61P1Wn50uTu\nGzpP\r\n=CTH9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAk5sKEGEzJpwdGNZUQNuAMHsctsihv5Mw0hW0+HKbNVAiEAhqzOJJ/jdTuilAB3ajTy3rCMiXJlky0Z5Q0GvypBmKM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0138863c.0_1615487816921_0.7786523049147946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.926f5bad.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-ripple":"0.21.0-canary.926f5bad.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cy/TkQEKpO8OkvrMimlR1kiJBBCKMB7tVjkd/ECDSFXQqUYUoLVfYFoWH/+eKYmZ/5m7xkDQWxOA8HIEIOYmdw==","shasum":"b28b62c71ea49838c1f7a097004cfb2031729640","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.926f5bad.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnssCRA9TVsSAnZWagAA5SAP/iNPyG9rUU1ZPsA9RsBM\ntiUoKftLjGG3i+v3RXhSqpJW5Jh3ZhG9LsnvF1mwSvSLNYENfOWP2E3jVEDs\nUkcBF6hoWb5IjdI+PezYmboyrtSTM//0NcAuNsrZsTcVEQkyuk+IoG/HRmPI\nrDw9U8M6kR4d/hoH2SG1OiGqPx8EdekHCNVQtQx//Jttap7qYp2FHqxLZOFn\nNX7LxfnTuurPm/hfQ4CmJ2Azc6VFrQoxXcBlHGr7oet3bNSr7F6TUUQH1sJg\nP7WEuamknle2HZGkm5aFFf4OcVnFsiS59qPuI6CEce6CCYdhHeELsMdo7aqz\nbTmKf7NhiVyyV7D7n/DMtkUZx2UpJ8+XcpjxeXvdOxlL4X56km3xIu1VWM36\nQIz2dDOcrfLwGOif/eW7abfMFGTdZA31DEFn8i8cQV+CbK6DOq6Bgb1y44Pq\nIp8UdfK8WeoAE+2Qq31RuxXzOtbLm2zSRBlnmF+/89Qg8f1C0bkPUrV2G+co\nu8Re9qfXGWhwEYpTEya25ltDYeSDM44S2BPDZVC9n3tqRpiCf1YXxQJQAmRB\nACXd+T0RD8er1S0JslIiSDg+aivr7pRqJ5SpSt+RnaorAxVloeWYaWV+F3P4\ne2Y30p7OVEXwYqaHfYgTCJUIw6H/YenPcGHJmnB9zkDxdn0CA/rwHUw81yKU\njiZl\r\n=ZnAu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEglcxgecQtmdSxVmFIgEaZwDp4KcC6g9aQDowrNOGYbAiBXGaalI8bNbI5O0gDIK5EVZPQtU1woqU2jKd4zYLNU7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.926f5bad.0_1615493931828_0.8281034765708672"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.520290a9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-ripple":"0.21.0-canary.520290a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Q2pj3Bmh3AxT15+uGTbr/NwBX53Bfo3rEBLYx0NIRBiiZa42NQ8yCEcMjTuHXRyt2mPp8p0DMawHEGubd47+qQ==","shasum":"d19d35cecffa23000de5f3302d4bd39a9efb523d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.520290a9.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpl0CRA9TVsSAnZWagAAnhcP/R2E1ITNaxdjSFf+TE6R\n7AcNhG6z3p3kijk3xnaAvVsKRgxQe4HACjyjKlR6Ehcs/VgUza9PJ+7oe9mE\nUpJ/kMaXA4x4GPTuQEfhmcpsMPx88kPEZDO8/Z2CQyUolCcToSv8Z3rnnMMo\nNek759GkrJJK/l02pjD6l4fDCTqmH0DvEdsMCI5Kus/Co2uPPef8/fRRhyhR\nIvhG9kNISq4RNriACYiw280UfkHUTzQoLTQCdyE6GFL6q/QmHMHKFCJ/9L+f\nLyi3js7Z5+iYGTDdP304R9d9MYWdt5IyAPFgkO2zf1U074UnN7uV3kT/MZLx\n40Yi9V3urM/wBKw+mKNX5/lCjbroassVMO4mIUSrajCqm421VbTb/QWbzUMg\nl4w4T5M79UIJeQtY9kbqbKJc1hq7HOvIDQv5cj5iwTE6rSJNKYOUCJF3efHx\nn0U9+BieOE588ygtAbFuk/sSnUAt3UZqvDbQ7tUGFKNl5G3zjANReo3xO4Ji\nFTDWNEg67n9S+od8W/n1Q4DXg8Rg5kJpK5bfda1EWnAjGxhjLZX3uraJBs0+\n2lnO0G3ESRrUX0hEH0JII8gEZjnRsJmKR8fjZstF7oSKaovnht73j2qhSSm1\nXa/vcHk7WbAhuK2Ef/3reCmyKZyu31Ne19vHp4F08NGRS/0K/IFMYt63bijQ\nmhWr\r\n=Z3o8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNQm66B8pnW85LmLilmrQv3wjlaND1D3FI9Pqg2aQKJwIgbqgQDbngGUjzOaLdb+5qwEYPRJ1IVhpy9abJoxQBt3k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.520290a9.0_1615501683830_0.21360089384406855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.9ec431d1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-ripple":"0.21.0-canary.9ec431d1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LIYlpWGx0Y0Hj9Y7rTpFOfpV077Q+1gVysBTIRM4+taet2ew7KIQLLX2t0jb+oIpKttfUORgpRhK8L9oyR5UeA==","shasum":"b1ed11d5ad0d5f62e2511d4dcc4bb79337b6a793","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.9ec431d1.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpp9CRA9TVsSAnZWagAABOUP/ilXzu+6K67mExbUFJQl\n1idgw5/hENHlefgBqmVy+kz7ItILgA65IMS3p4XL4H7OPobyatipWSczX5pX\noOrRFMqoT7QqLwUpRsEX7uyzhD1q4MCMaZo5+YF2m+TpzTtZayQhjDqXa+7P\nTGpmX+UFKV2wygQupgP5wC9akYqlvpHpemTALvHx4vYBnwJWn0Ffx93DQku/\neOaB1Pt2MedCvhysPFR1+TeQrWZh7Qef3O0jkYa4IGO5jPppNK4kO+8wGjNv\nzZgkHO0C5MiuBrFsa3KnKkr4HKht8s0Duj14Bk3vHOT4oXPVZCnxugMs6yKl\nkVZliqoXYO5DPkO/MGL5JioByZPxDXBPitsu0nVQ0KucpM2nryx5bCacrFcK\ny3mWRve73j/Y9DbhJnKQvG0ff8wzlNgcX0DdPXAlL7kNlmxLPGPXJyeX8cN7\nelW7he3LMSjg7F1benCuJ9BEgvxk8vqv1WmiMgP8cY9U5YXGbnNqpmXVIqrT\nSNYFYil0MBvhGBoU84CLbWJiiSkVkP29J00iqV4V7pcclZxZvRYUSCjODqFx\nt5RBf555KmLdWyNtSaxhCnwX2axoGSz75+C7NGBWeyKTWwZqIvs0EzLvk4Sr\nAxy31cAF3kKvcO2hS4md5oiRDzwgd3x6p9SmEvG3Dl5uIKt9Wi6soKWxTMyu\nxbfZ\r\n=xCUh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPjjqdnBuQ1bss4jY2fzgdXjZvyZdVELuS/JSofExVlwIhAPQ0IaT1ReKec7f6DwGG1KJGLKfZbGcdu0uHhNAQLY0F"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.9ec431d1.0_1615501949440_0.5815094201121944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.4246c082.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-ripple":"0.21.0-canary.4246c082.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RjtyCcE+6jdV1GU7CvwpHkOQ4HQJDvbfC44V08za4fEEG1iXuog9pMTBx6y74qxTUmS5Oq4GkW4M3iPigNC7kQ==","shasum":"e3b48496252d9691a5fcade9ea6e8ce74fd79063","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.4246c082.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwgCRA9TVsSAnZWagAAWcsP/AnfJ+QwFXYpmLbnrX3m\nzn2rLsHCFV1RubeQs2T7eUdJbxIAKCzp34jVOekKfTmVvgi5MN7CbZogxEgt\nnJEfwLFVZLzzxCYVh2mLgrHAccxJid8jo1wBWGCQB8rVXD+o/1OKiPlhYlUg\nJNAakRHJS0THWx9icQWCxINNbwgyQjTmp4C+377BSMXvnSwS3apFyxW0mBeH\nQR5flAINE586Dle6evttrm2kpSA7251Ta8BktbZ4mZv92ggcp85ZeO3M3bHw\niLXo0BjHUB20kr99h74ARHEP5OvnhN2LCX7uosydb2+BZ8zRaSe+giiSi34X\n4p3CtrdC/KYIzPgb13ByQ8UbBzjNKozu2s1eYUbPrM0iTmaWsNBRvcg/+DP1\nRi/6XT5FHrxx6/cwCHiMAeEIpwOupFfkTefU+nP8saQ5UF3mMWp61Qjpd4es\nV97O8r4UDXuzVpjDU09eiC/pFUcIsJCg2oHn6MHilHibRE252ZijYWs2HTgn\nVSRGclPAmh4tDPoN42rcE5lOU/eym/eXgjwH5lwFJ00FdWcudY+uZMlXR11R\n4jt9dAwXu6llcNsATXqvgGa5TxBA+b/n3uqnVVEe2M3SaQjujxe1lyojG3Ck\nurmP5sdEh7DTNb/ZtHHjQQdxPP3gC4CiFTYHDVMKl7Bok0TLcUIc/8ELiVLq\nQH71\r\n=xLAa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+838vec6LXc/evySkfN7Pf9tlN3MkeITHjb5DmEBwvAiAV2ppfrcJYUKUW4h9XGDu+UO1aubfmfzsl/bV5NPXRYg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.4246c082.0_1615502368143_0.8697588350862968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.2d736253.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-ripple":"0.21.0-canary.2d736253.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+6d7oIRKW/SptSXPAheUQLF3YwFV+xctvmaYVvUyKURc/gUjS0/CNvmvbUNC2dtX9vFo3cL2rxXgCltVZ16PYQ==","shasum":"0ae9d3edf76a8248b564e20c5d6e7f6a546ffec2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.2d736253.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FMCRA9TVsSAnZWagAA7q8P/1ixnUeR5VjD+bpWyE0H\nWvFIwjX3AmTBcKEjlVep32ZNM9Gp+2luumL9yEkm9r1XoLt5a1Z9sADOemsL\nXxVdwjLQXxBGPI+67rEo3xUmsTwGL9lWCGx7zgiV+3vqGumtix2GBBO8tXXG\nUgjxhyKNB0ve8mwIq2fveoCQeJdZ8VbMBaBlFE4Jq27c2EFhVwZQeLT7u+Zg\n9GTy6eScEPpMRvAuQAYYrafAA0/h/l0P3dFda9ZWtbJ19Nq3Ho9ZYyzZw5y6\ngQ+pQmwKfHqHmvWio+xWuYsR3b6YiVcBkw2Q0gP7qEYrY+PVSrxT6mLODBv4\nAMAFdwzOTDOqgbZ/CBLJ6qGC0asdWG4C3IiXlfZSO00UOwxZ9GQgw9mxxHlp\n1qn/zFHuOiQxuBfWOkYcLhEQByCq82rrOQkaMbDQ4ULyX04Uz2hlwkpP7Clg\nMHA1re4iHVpxzPIrqEpYK/ZS+8LXOkWSk1pR6rbmknljJSVn/O8isHPuoLWA\n3HNu+nT94m6JQvcQ71x/4eGran8x8IBH0qjocdE5i07/VnjLJKatSP2fVkjd\nZphhCz5OTLmvUQGCOh3ditfzLQr9XTcfgIt2UC6awkqgzumSvoEmcVY2vmLK\nsjYv6WDvrtq+0P77zAEDs7l+mpcL2mSstR82pWTxfIwNfjgvbwKQRVv0vmeq\nVryR\r\n=aDVI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEEBAtHzZYpqkMz97L0xXS1vRcdkxHWE5kfMr98aCQzgIhAOSjXwKYtzMpDOju02D0yKNN0/TE9lg6eN8gZpyuM0Qg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.2d736253.0_1615847755882_0.0042508735314013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.7033124d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-ripple":"0.21.0-canary.7033124d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wyf4xvLVDzbpduqsH/6+A8RQD7qsmtjnVuELwS10+NxsyNdiTk5PydbpmM/ai8r7ceNugerI1AjhWdlpSl3rYg==","shasum":"da6e12cd875ef771b0107b9d4cadcee7ab20b7e2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.7033124d.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPr1CRA9TVsSAnZWagAA3L0P/2Vv1D/DamLhvzGUpRKc\ny9pfPORrQoN624QkMLnTfGHzsxl+4y6//RD/uWFPfRF7xDG1H+Plplp43ySl\n1WRvyXCcgTi3NuTpzLlTX2XAvzfk3E9+XfD9cURChQu+lN79CNy/GeWZJqxm\nNejxIVsAQ1e0i1UPa9SgxU91d8e8/2vr7OinXZBTZilluoEgRUFUpgqrCnGn\nsTmFRRtqNpSJSUPJeRCY/X/Cgc6vJWggIPxmuJUfuZUzm6mik1oF20x0rknK\nTFGKpNiRC7O+G0AzAD3pT4SIun7ZtHK6due4b/Vw7tXkT95JAF1Dmxq5uhKA\nE+F6f8057mZOM+7ERqOY0E695dLDRIben5awOWQ/T2LXkt6w+dlt0tLBtuCL\n8TgtvAAiAU/FqJN+ip6MwSn8uFK0vaY9qUyMzWa4Sv5T3GGwZXrjFOYK+BEs\nTM4IfjqJwrcRDp8NNePF2pXlejRAhBTd3A8NPInxcxYkX3k7/Pn/T/piRnWo\n0yFwUdq1dJL1HgwB7SAx37rDZHOMIwlT8K7mSgjq8I3PQX5+V+3S0MDyIuS6\n20dfWyuF+1ppnWRxBpzkjplKgDbLZPZA0zw4JYYQrAA+Q2Wp6UTkcFYBJ2CG\ny/0TxQcaYbVg6ywDA38/CwA8dbt51+fNGEqySOpKoR0zQnQzfIVSWEZYhgAh\nmq9E\r\n=uedV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/lgkC1Dk38gProAUC481CZXnG/naYv7B9bM9Ei8U2aAIhAIcxwjiGVzJT0J4oX86tF5XFiD+fYfEDXBi0QAy2XGDE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.7033124d.0_1615919861178_0.2897404344907135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.6c0ee901.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-ripple":"0.21.0-canary.6c0ee901.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lk6os/h+L2TgswaSU0h7Qqq2/jok9kYUxClISDJMw7QetFKqmVSsRGLJr7tjTtLVeemq3AkLYitziie2vOqzCQ==","shasum":"2a0695f30a3cfaea3d4529aca787e414afe00788","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.6c0ee901.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOMCRA9TVsSAnZWagAA0hgP+QH3xUVRsGpvUH4+e0qy\ngmNk8FLlliIo/Q7c8q/W5W8foTXK0I1y0itYRC0UMyERxX5b1WDP542Tqcyl\nfqTIzZ60bjCdEvsGLC+ihKbv9zFUsR5gjZUPozljKqwe2f5GZT6qtLDmk0vv\nUzGuJeUKDYneMPnRRovZjLG08iNKQq0Ka4egQo5Hruoc29biFCYPDPUltGR+\nLZrpENBhAbrvZHw/M0uMQVXwhh+QErigDUtllvjmF6apfRZJve1IK3pvHHBr\nwokNRZNziDqI+yTN4m7Mhz1x8pXwUeSveqFB3hqAjoQmrM8eNJlBwUr93O+M\nFJ8B3bDjAWTtNsjNsRWxxYBBR83INvl+8r7L85N+429stHui5Rye8sFUKV/5\nmQsdcPkVW7mRXnFi8SZi1SdxQM5hfIkTds/tNfTK/TJDx3Clbg8IHqSxOXh7\nXRf1gffwBm7ak6e/nN6zp3YbWsVX7F5A+lDy5YK/y0Cc1EOvrjy1JhsUuURL\nTiARtL/FuPR4XmumdES9K4rVVA+MTGODUYzoTZ2IrIiQakL0jr4hVJ7rEHej\nuWFIoJUnLunrN79A3tNKGXnMm3FYVeCX8zXhufdoHNDGtTgr8B1l2Uobx3gT\njCEkYP9ZYpCfgSShr94hRI+qcrOJ7oz2OLO9ASTmI5urWhZQMzdmbmBo2euu\nwZRV\r\n=OUCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWp1KT4ViLG1Hn3vVLerUQHsiHX2htK+7WcCK8nAYR/wIgc4yO85d0ie5MtLZw4AqYsvSpFuwyOeVuWdtOXgIHW1Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.6c0ee901.0_1615934347742_0.6519009911281282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.7f0d605e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-ripple":"0.21.0-canary.7f0d605e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pz3Ijk1DDEOcB6zYdPhEAJWt4MsMYWdd+aBMX7NOkBniGo6CWYUn/Z2ycg4UHtKI3IOySXVxZpeoC9e9d64YRA==","shasum":"4d85e9c54ff2a3a58d122edc7e85a1e8369626c4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.7f0d605e.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkS/CRA9TVsSAnZWagAA5B8P/29n/H0UWWFFyolRSFr/\nylGO5cJYi3vqjfhHH4st4hlHG1/WIMjBWuFzxYLE8WKU4/UKoxaVUTKTtyCs\nxjh5l2ajN9FEeMcwgYiTFdRBLZGJzki9Vz1p+Vi4i2l25h504xFWq8XXM7DA\ntnSVDPOPYV2yfDcfJRaCStdjUCMCpMLPAwz6s4R0KdQcKtF3Hwi6+xFkZriT\neZpPeSa6sps4+jMs4j1rSPqoEdktEBeSONms4GQ2H9WCFyU/0yQnTy00dIkB\nzKFVdHqYauBqU74VhIhbV1vgnDR7s8Xd3GzHdoGzNCtq014+ROvAPwGZuR4t\nI1VaD4fr+X7w8X0kvbFnQeZc1itFJt9V9Coiwq5VxSdlQy3M/DslBYbCh3RT\nDut7yrhIaID8VCXaqZDXjkz5CQlVY9/VjbZzbdeJHcUyAbL2goidS+tHNimq\nSJL+PhaqDWa1jkFaUbr75kfW2nqRv1Un3u6SZk7GUcVBb9bv81tn7nfi8Abo\nrnBBOfSKAr7tDBozoHr2DSxcJAZStTaerAdhqxi0Vg03qE+iE4Z2Uw9ohPfS\nd05u3mX0hzgcisB5bbzGQVUwB8PviBzbU9qXcFRfmj8K0h7jmOAQihW4Ba/I\nZA4fkCZ5s5hutCUgrSZ1D3bC3KN8nDaHcAAymJbJBj6l/hZVySV3fASBXunw\nzwvs\r\n=sRhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnDIrrMxc9C3ToxYlYWHIfvALI7YwlZ8WMrke81QFPVQIgRJOMpTHjBN6Xz2fLI7cezvCi4f9dHlf9/9UwRh5sk5k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.7f0d605e.0_1616004287432_0.8482834649686559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.572107b5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-ripple":"0.21.0-canary.572107b5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HJaWJtf1HUhLOVZl6+UbVxQCViXSaiYrulVt5yF/e2SnnsDw8omKwR+fiU49TyPro/A83SwTql87SOkymoyNrQ==","shasum":"81bfdc72593b6516f4f95ac2cc704edd76b33f16","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.572107b5.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gvCRA9TVsSAnZWagAAztYQAI8OTrMF17+xQuz9qeU4\nfL/jETn/S9KWLiObRG7kp0BUXm9VNHGiJUqDMmCfIetKQWVrJrpEgF4iNUP2\nukKZIST7iYZdYHl+Kp8ib567/J548QfETd4Hgvc2Jfm6gMBuL0XRRu7ifEUk\nhPsytLkeVzIC0DWOzUBwsy6nimnYsSkGq4k8tmTaaGrrA9HDL6IUWqbW65gB\nEf43qEHCcNwewHPcnud619xpJJ/l7Kl2sF4bQwjWMDOeCOjDEiPmz1jC8vsC\nkMdltDN4E+AobQo2rf+q4Us1W6VgmrHqcUz3rqzzZM8elt6nAC3s44xx15Qo\nuj+OPZ6vnYNJa0xtfn1iUJH1SQQQ53CEul49Fd9cX92wHNk3AaDakZYda+YT\ndAIxHbmpDdgamCAJms1AsizE81eDcICC/OwnRHs799LwMYygL8+E8gZ2DfYy\nn9cCkNZ91XpMQcbaQVCnzV7nBQSRqkGUej0XUIBW0sDtrY+Mzf6/dk9KxWbk\nhNLf2fYbyyrflm7+gUTaMZxrJ8DwQxm1ZEF3pJrQHcrkC854ekE++LzSiahG\n61r52NuFyY+FM3F9fszAviDzILB20nHFhl51KS+2/7fJiwByqDMRN4Xq+K2x\n121sugbVJ3/eHT3vKypccbBfNVPWVreHdlnmxv7Cyyz+B3KdxgdL4XdJ3+2u\n85V6\r\n=DLsF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGO6dVryp1ygWtAML+yDMozjtoJnNAJ5V8Usjt+a4U9yAiEAt4FIK6Dx0aZj8AHV2iKu+J/DGieePj768LnsH79w+6I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.572107b5.0_1616111663152_0.3518502882956578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b7b220b1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-ripple":"0.21.0-canary.b7b220b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+JsL8Q3QXIyJ++oZSq0Vv01gk6rT780/UttLGJXnk21uhlnwdR7TSZLzfRZrT7arSAfj9VvTYnlGxO8l0qtj4A==","shasum":"e65767769fda3396762f76d38989942e67711ae2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b7b220b1.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+45CRA9TVsSAnZWagAA4lUP/3z7ce5cVd/jiD9G96oI\nx5FpGWJrg0rMf0EpVP2SSGVbIAm5bKgwPoj5FCB+7iaiUXB55AHtExQ2J4jK\nXEGfME5V2cferrJVViN/GnSIGS8hLNrJtsNwUOYt0fii1pcAkIElaTKuJowK\nz7z7kDccVS5x6bQB3Ktpjm9GZHCA6x2naQqcizN+lrqtobJBNbJSU2GEyz8H\n5JMICU4yABAAnSiG6liHN3InjoDlYxBW8LDypSrEJZkNViQKINbOB2+FKASG\nDIwzHCrwT4LwycQQsbNZsRQulttcQROuSgC+uexiOyZUEuBgh2fY0MSTbbxc\n2WimOAuXQ/qcRnJNYWl8OTPegITMmm/DCT28UvDSe9i2BM94ThrCaLpzaMoI\n78k9b4oB0jytb6mswBXkZSQcCcNyIfqoZppBCqSQL4DkNv6oPsyT5LDVuCT9\nrVDIN6jslLEf5RAm7JV/uZgHGNRbDBraqQX7ldWBqqn7xm5TeaKk5vten2I9\nGUMmgEwMTnwpAdKcEZKXwnTedDO1Efoc/Me1WsOkYNPg6+z5RJROFuQvwAlN\nx2arHKSRxaBwHubIbd1A3IFsUiKp0njERzjNSZkcXZtBXo/7c6KYa/en07Nk\ndz5JIpV5eifKZvjxxn1ClnFi6u5B6ytQkDB3UdsKdD9vw7kGa9mg7BFYqptV\nMuZC\r\n=zxfU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy37ETixkNP/NrqzlGuQaigr93yC2yjc4UThtPW4a9hQIhALy0x/SMIq6ifFDNWLNBZ2cE+oUzgUjP0RCh75zMZ25n"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b7b220b1.0_1616113209226_0.5046060859876287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.233b2de7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-ripple":"0.21.0-canary.233b2de7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KGR9pi3nWdibuMXMG/ioHX4xsU782nr33pk+SPK3Jb7i72+93qoxhSiQcqHyIoeF6IfZ50oUftJF6MJuEmOcWQ==","shasum":"e116ed7be9463f0691d6e7e50ea3be9ad7030a54","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.233b2de7.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2oCRA9TVsSAnZWagAAQtUP/048ONWVsyIkKe2lm+js\nX+mLnKf7x818GsQA6KChRIrsutuNoKtGEC5P/stM7HPfuZXJR7MuL2JMg8iv\nT76615LzG6ZgHn45/3HIPCNrI9VXluuFRAG7CxZtsdRqQ2wQtgNtL9IWolG6\nue4lqQooVQbP8SgBugk09x0PbsGOJYfAKb0qiCwtOCCD9bkni5KZZwD9Hm1z\nc//g1AADTfGvzKvYWbKXQoyGLoBaA8nQpl5IKCWR+UaKNOnFYvALsAV+E4FJ\n2kiYj4sENCyGj0F75DeIcnhGv6oV0JdldcrnyXY3PgM9eqBQRLljNbKGwseO\nWG0MupuiL8n204RugCgWrV2P5UylZQZKFGyxeVtP+6rjwy7SSVecqfl5idK+\nQ7k/OheHAuneRrAFuEq1bqSMXnDTjhSAPVNIUsgTG96jNfKxDj39CGRgA3j0\n7RzDDO3PBWYzUnYyQ8yQ0ugahMfiN7qhKgKAJD0T1JFcXO/L5J5tduReyxDG\nqla5OUe9QiL9/3PDiIs0KtqzTkAJxpdWX/497iHajELOidDaIaGLSUJxKk0S\nB6x6gxYawrovndqMDzcKxSSFvWZSL4EBB5vEQAlxdr3LFrXUihJUiI7DC4CU\n9pvVrby3BlJ1SY5hwZRFyMdlphaga/DboFNmMMgiOFpbi45UDhRcJUe5S6jw\nwlu3\r\n=4vdM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwaibSYQ7xTAz/grP4iUgZVQBeFnlhpYtgBqzzFDi6qwIhAMnttPoYRudQieMP2+eMhR7X/Nsmr72N2xDKJzaTevkb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.233b2de7.0_1616178599731_0.7839046744617792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-ripple":"0.21.0-canary.0c1a2d97.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-T0BdkEc+tbwr5BXaVv1Bi0nSl0XaBUKQ2o4UZfX0bVGuSPM8UtCtmPMgud+3mWuwoE+aziTshgNPeWJ0oq66Rg==","shasum":"f0df7f94ec187d76bad30ef4ceec18d32f787fef","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0c1a2d97.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXVCRA9TVsSAnZWagAANToQAJNWe9p8rdFYVWZI+95Y\nHMVyJ05moCkjoEdZ2WoWYwUfdZ44nLdweNuuJ5AcpruGHDRDs3ccJ0bwlX5g\nQtgEORJH/VAZk5X2FxM/lciJi2uOBxb96WwkbfizVQmkXAgBy9AqBBN4G9P8\nNPq10LtOdwFwvOV8WX04FymscDUGN1CSLs/oRtPWkLmvU3snI47cf70Sa3/L\n5zojSIeyA3ZsY4Mhr6EPtjXdk4cuqXJqtnM1dOltu9NX7bTAk1BRLbpqF/A8\nnqKxdGyiRxz4g60rRFLk3acx/P6iAD+rGfFuNVJulHGOm0KZIe4ZVWg18I2H\nQbzmMgywHZcDuGUtGU3Ver6OycLtTDn0jNEI8Ld8xnyRJb/YTUM45oZwY2aF\nORXHhQjxzomXWcuWeL12zvDG4DrMMci5Sh5AUJ312/JA2LSdX6B8LwIXPcWa\n1D9v8VYGyY8BSok2dUmUcAqp8zzYugVnQpTOl+u4G8x+NF95AzTewhD2+d82\nmdlqUOQLaty+uHofgWJNQ1Ut9VrqYHYhds1Btwn8uOyZb7pSTWmC2KT+B4Dg\n+rGtIcfRNDmrQ1QageHsUIGSC57LccPZ3rOiAZtjkdNW8w0NqdDQ+OCI3ZB2\n1kd8P6y3aSBcVyIIlUlmZ1X0C1pCkqb5+DdIuV0x8ZDn4TB0Ta6Lp5Qw09E/\nUJM1\r\n=y53F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM5U3Fb3TsgLoPwaJdM6rMPNHHomp3w6Ij15VxDV058wIhAKi4ZRbzpLhZcnwcG7kxNssPqnMjRj/qaX+/INtN/5b+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0c1a2d97.0_1616188884723_0.5923120135794138"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.57ca2e73.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-ripple":"0.21.0-canary.57ca2e73.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rINkUEjjmB9LwTMzRcXqmO6CFOvQRmXWvGBec6b73X5pjOqwSBB6GA8fiJmkcIOk3R98b7OGFK9dqvxVnyhpzg==","shasum":"589a40466000efd731ed91cc7962357f22c3a5c3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.57ca2e73.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSh6CRA9TVsSAnZWagAAHFwP/iJlmJ9VtnO8F0TrNbL6\nK6XdMqqCjQZa0aK4EZ6o4r06w0jXqk02UyL2zETYduv8l/m9uccMaofwQFuN\n5MI/fs7S9fSmsuof8unQjJ7GzYLSQ2ZToKkV0+B2kRNI4eHt4n60tqADW9fB\ngJwYdK/6cN4VxDXja7Tb4+LD8MmcZVtk/Fo4Q5HXdFNIuJwbmmURAzfdQM4U\ndr2Bkjs8J6Qo+7lc/np9zDFwOllcPrYhXBDGgpPSvUlILUflUg2A2uX1sesC\nUXITGcFdj/rfkl8AEPSMB/Er/zaa6Zok4DAZ437UA3XoRIfskj0Bfmi/rLhR\n9hvOIQ6v1VXW1agqSMakn0fH6ABiehq1viaRlXWhK/pp+GZ5bNtltgvQkJ8R\n6eO6KFZ70wKsihEA8LA5qzTqQWYDv1FOr8rALYrHcGTFxDSwiUbnxfsehckr\nm95uTAnXgWCZOIAOQTIQPuTLRYmOlPXk7VnMNJzy6FQ7heL2Ky1/g3tYaJ6p\nwErJXR2WG/GKKjLzL9PwpxKjducrjlvQfNfGitoAEHRjYMwxetjiWKd73IYk\ne1jCnRdcSAygLwwlzG3Cg1DuZ5DSly20z5pOGl5c4GtUa5tqsJoOEtUBv5N1\ntYefxVXgz/2DDdNmWVxijD4170xzcqf0Xv1ddzbu8Yw4KKx5U7wDu4OuH6xO\nIl3b\r\n=zUGs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqCFX7XD16KONbbueaMWykPMhYB/3zxP9bNtvDRUIIDAiEAx9R2CpEwkQIfSgvJk14h9KTtNdLq3pBtC9JzpBolZis="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.57ca2e73.0_1616193658324_0.6950780221014752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.5c058f4b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-ripple":"0.21.0-canary.5c058f4b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VnahcfcyfdY0vdI+G71g5F4Z/rJoJW9gHnt2De0omtJTyBnENMb98waiablj80FcGZzov4OF9aV4nJgdXxJz1g==","shasum":"eb602bad5a0fcece4571d73611ca42985a984dd7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.5c058f4b.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTzCRA9TVsSAnZWagAA+5UP/0eSBWZIfNHNtSdxRvW2\nEmcL/sGw8p6XfETVf8/ugmrYd2o7WqRNSLEVO7JaL+WGFtCYiPvBnanc4WmX\nM5cMTHGpmZAdUpiF1mV/5QpTRHjTqDWVn2TuyeKKhHvHRWv7R6NT6i87nDkt\ngL2SZLZ6Zytzina9+iBEG/bYgXR/JlXufxzPKAtnnxf7i9sh9VvPY3kEkYib\no6AdP3iLSV1Qu8MOpPKfhKSiCaOzGyVIaM5J+xQhXRRf0JKr7USmX5vJZVl3\nFA8XddSOuHURkcdaYcYRy1KNLSYZk89MEgD7QrJUMC8X5kq7O0rr26+8WBSH\ns0BK/R0BApVi8ire7qfuMG/s+CS7GFqBh1CMMroaTe83oKmw/SUGdMmiH7M8\n7TQDjDVMmc5Dd0gEfFAsULlaUxrxEOkHASR5HYnIIZNY4zYS5RizPq+TkPnv\nm6hrdnOKWxYTmKGuDEuGZ8K39QlNSUyztUBGvILxHiuwboDV/o2kc6wB4f55\no97308dkdRKqR6Lktn0wGkKLIftleYD4sGICyyFdbVgzw2qvD7A4oLEK2En4\ndv69v8kFqTwfiUJ0M7CZnDhr1mQqyNebH+mqC4kbD8dhTZaeX8xXjrPEBlS2\nMplco3jRD/uZDD85fFAR6BCPHfweP82UFD4zLHr6KroQ0RZbZEdDc4geW1jo\n7UD/\r\n=Z+rM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT8pqNL1rAfGA3Y6YdHX6I6pXVU2UTXe9TPMa2nP0hqgIgbqKEV7u7/g5DeYqWxA8kuXunIG0/BTghgCOTJF8nZ7M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.5c058f4b.0_1616540915533_0.6248278503973463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-ripple":"0.21.0-canary.e27ef7cd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RYPC/N0JaZfIWV0tE7EWOvH2l6v3JTiv3/OWy1OqXo+9G33+fv1p2DXz0MG67yUUCeFn0n7MpFzf07s4Fmf9HA==","shasum":"2b826bfd7c2c99647219e53ad2661932962835ec","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.e27ef7cd.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XvCRA9TVsSAnZWagAAxa0P/A9Q+05DAN9QRtuzI8by\nngAl/fAuL2fZ9XivtD4vrfisT4U4zp/2nX9XqIUEecmW+KPST/ga6Zyq7JaI\nNxCjPHqavztN7uPlMmPMPhPgJEhhCycwkRiPjsKnOwA7Y/jg11YleOkCl2tw\n15zRkwTIR2SdsvuEmOeO4ulsFY5DTNQ/8FmcnJFwl/R12esgQZ6Ix1egDeWD\n7S1hddscO7TuBCJY8WV4Gt09zqLbzzs2D2lHVcfUHdym0FnOXAJpVNivNYtX\nm4Cje00OBN0Y/xwBnfTJSltKoB4ZPwQVZhZtkyEZ3n10Au/VeUVPGAF2e4ip\nPzWKJGe82t3CaBoGx+vIFxxdqBJhTK0vbELcAzao9SovTd2hMIBG1QNBhNmZ\nZmKVRPK2BSjhr1/2L3dC+UmKF0epqBsCxd3EOAElMXDnVrO2ndTEt3sZ7xDx\nFnYL+G9HSe7nD4StVnme0w3a+WvAZGcbNVGApgwvu8AhTJ6rNnk2Ku0RXrhp\n4c54FUYEIfpUvT3D6b2fS/gSAWJZ4wx8KfyP+Ol2AtjBKpvlD4oQB7pF28qX\n3jMINw8A9Z0tH9gc4n7dv9c7TxlPoIdO5sZGCwUOFigBEvOPiLEdUtYonexT\njynxwJgfimFA4WW5u5iX5FKcgwBOO8UInk0ydwXh35s/+RyZxUl+v3i4d7V7\nmYCS\r\n=9wLJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHF/fAou67zN9B0Ha6t2hqZQPQVIXdt123GVFKHjzQdJAiABKmbKV8WSTuehS2aAfIJpFYJyjQ2e+fzC4s84wKVIsw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.e27ef7cd.0_1617135087384_0.26205917847323756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.15c09e74.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-ripple":"0.21.0-canary.15c09e74.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-IWfVAIFnHnNAZDYbLQwue1RsceD5YbdospfkkS9o0am8cumjR6GezZeM1Y697MAoQb9KKjkhTS3GtmUQEPPwOA==","shasum":"cfa68bf94e93f54ffb0d954523d2c95097813a8a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.15c09e74.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKeyCRA9TVsSAnZWagAA0CoP/3VxpvZQ/UcSuSOtNLC3\nrnfOC+vcDsj3KQ9p/0USZZKYyzXwAtFzvI94lDKYmt2K3Ng4gzIxhk2mKyJ7\nCTpe+viRo587A1MyHeu5TEYQmHjR2AtOtGWBAb+aGHdXaS47NEIpfVKSviwE\n4lCsi70NyxdishxtNA7d1So9lKn8KFOPyGjLbWZOtai/4wbqLd8svHTr0c8o\nRqrH3vYiRWeK5os5zX++C7PU9b4REAqH72J0Wiu8mpYRpshXsivaTkOIoS/X\n1a/f5bKNHflkhgulUiaxiD1JdRbsPNS3mkNzApmfdg+I29RgDwqr3NAQ1pQB\nZf8gJxHc0NWxtXMOuW2yHIsKCrz3TzJy0wsEoMM3LalLNXkh2JN1EEMVPu0y\nVFtH7pTwtcnMdY1Z90nH2pRfFyzA0X8DwX6+oG15QMw77HFY0iGGwOvUCRMz\ndMP1hCiwZgdoGSkiWi5k6WvKjY7+qyWPW9iOgIv1liOBoy1RsjVaxwCYGf50\nyC6hvPNUt7Mdf5Uzfxyaz8j8OQKNjxfV6aSed3LelA2p20h8J10XRZaV0kl4\nOnkjDf7wvKMsBIru/7yi74J1lAnoPIYMbXmPXTKyrTTkVwZ9fygAhyFtOq++\nfdZd5IIj0HeY/18MXDcAKC3TPbrN2CsBKaWEZZj9MVfK7V8LCfWbmAueijGA\nLEk7\r\n=hezV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWCueDRf9xm867eE1uFh7iJ/QwQKaLVHMOP7OdtCWEwAiAGOUxN6O323HQMz62EL3Z9Ew6YlL+OVGJK9gLEBm00ew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.15c09e74.0_1617209266115_0.9413590281777318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.4dc32be3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-ripple":"0.21.0-canary.4dc32be3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-giq3bTEXS3upsQ0xdYJPYaZ8Pp18Iyy56EZu+RXq4ImFvGuqHD3074fqH/SRtB1k4SpTO/qL+HKsoJgAkEuR1A==","shasum":"4d6f4a38faf52e96e7635a0b6961833861ddb7d9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.4dc32be3.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpGCRA9TVsSAnZWagAAql0QAIi6DEaR2kvpCPe5jeAz\nnjxiqnCx3vUfMLRd/hVBF8skaboU/AR4yW1YMBWaNXnib8XfumYfLqFP76+e\ngnHerhcIqG28OBaDrgOX5odg75vlNW2+LzARWlyirfVwrjpceJ0HvrJPilnk\n+zp3P05Mh0+an1/CW2tjipM2PFmNODCtgyLxIg3cl3VEd3kzshDF88JAnLaN\nh51gBeeLFhDPlCS3qzR+bKoXjTAx8O5jSlIKO5ynoO2oLh8nSFAdqzBWhjxZ\n9zYtankZT/JfiQU/VulkIgg8KDVbU34Pmo/UWDOCW6tVLVnUjiPiTOvg2qVh\n49x1d0n/BBD8SBwWuufGpK8Ra9xu+NTmCx4NJQFfZTeDsZ9OAe+Jn5qmGIS9\nMZpq5KKIjdFkZjt+3HBC89gG4lK288waKSq11s6ZTMJbWxrFhxvxEDEE/Dvg\nmVD1hwoDTFvPb2cEcgXNEH+g6LzDyQ8GYXDBkbOXP49zqVStIquckvhXeMWL\nJhbMm3zI44z0f0fBKj9zCncb+fH2jSDg14m4tAuOw/9VFtzrQYQaKPpVlKjI\nkmKBRPUiIsdjkqINSH9sttlUAm75vUGh2+PCZ4TxmymblyZ/aXlaGjlyvApf\noCzOs9vLf19ojUkLeGzHWamBKbvx8eLf+t8fxFDUAjxfLbVeWySUwqhsayCI\n7Y91\r\n=ynKD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWAeKZYvG5uodSqMYOuwOXZCl896VW85IxdOSWwlJ5lAiAcTAy/Ll6LcdRC/v71wzxULcKCcCcylx60lWGBFMJ48g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.4dc32be3.0_1617234502549_0.0047455123340891525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.4b717f65.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-ripple":"0.21.0-canary.4b717f65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HT/xBv5CcxElPllZrsyHEv5dLvuvxc+GC+bCl0LcQ+FiqjKWLB4sigsf+FnJNQfTkLlu/SuEQljYZmzlV4sglw==","shasum":"43686e1291e68172b83dbbbfa92a65754ad526b6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.4b717f65.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2LCRA9TVsSAnZWagAAV9sP/jkFETCZXkL977s0YxXX\nMNZJiheNc13pe5a6OijESBJ5VS6z8v3Ne/BNghaIK13i4Tsbsgixvl/yaVMB\n2QI80e6Ibmw4u1fkBK59UKQ+D9pWnhmJRj1R+W4yiIvDKifhiB0J3SA5ugkO\nDtNGNrIoHtyANh52X8EVUqQPWJjfMqETFQZSeBUptEXy1YXhbz/bMvS3hECb\nEc4BDoi5nkYd8GlIy6nAzKt2cRH9hCuD7LwJXfE6P0P3zDqZsVUAuMMtY3xn\ngirAhLXY5gn8V6llPq5HrB9v7jjMAcSqKpzWa++FQ1FK3P9+Ha0ANpZpdmcb\ns4/84IS3ry/Mz1bCEL85x8V0o1LoY1sL4OSHBmSemgaTNZSnylvON/AByJd7\n8chJFVxtCJcMQiDLiHarOnfJwFosnBjIVPplSfTIPZkIJbO7FqKaOT/037hh\nbDF9Lsh+O7fMqE7h5FKSQA2h34eK4PkHlfhxFnzQsttdi7dmh4gG3K3OS/yp\nv5wyXNpdpskJD1nNktuiw9QiI34RR/lBTub/1tO9t0Z18AtUqQM7s1btu6dc\nQu9iUWS5TY9TXV1jILjuqOTYrqFLl6hRhTtDjUXV46AaRfxG7DhumZ+M+J2M\nSM53uapZVu7PdOqwo+g1r7/1aj6kncfq3o+PqV/tjmA97r90HNJ4RL+KuvNg\nDOve\r\n=J4G6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHOKKDDQKzl3W3zF/kg4Z4UOszZL4Gbf90LFCzKCcydrAiAnGF1vhaYBRTCIyhrAZRUDF5EWUYxWyb0r9d04LFXJgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.4b717f65.0_1617300875304_0.6462018475355904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.c6870f20.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-ripple":"0.21.0-canary.c6870f20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-laTUq/7LfrWU/+PFNrwTX5X9MvJqRqP9VxcyG79zaC/dvSSu+uTCAMaWtSbegG+bw86ZgXGN7SOxqoNnLnhHbA==","shasum":"308af8acdadf07a18c91deac41879e8b0360e1b3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.c6870f20.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpVCRA9TVsSAnZWagAAJN0P/RXBBREfrGCnr27MhCSq\nM6V2Sf+3qZepAODLKZUPdDo7398poTyAFpovCbbsOaNhlC85pE8hOY5gaGeD\nAD4XF/18QfyxPSCVr9rjnnOLxpFojV2PgCX5sqRX/lPkxh2zZmBAEdY8t2z6\nkZGWhY4WD/Mq4xETzIX8Ro5HyfzRNOA4LGEIBV1ALwbUNimTg2Qn6tjLcS3j\nZk3nFxMwKLFD+XLbQLrTXD2vcvIfYPGC8z9QVxLiPmoNX9J+Dxs1eEeqwC5G\nA+88jiuFFlQ4Zf57/3p1VDzO1N6xOlP8jxir44scMRAQQzkrvMESaRHRQwpE\nGJJyf1H3LwiPNT60JAY/p1KQ3/B/GwmZzwO37TX78fSDhdVL2q9GrX5zxcVx\nanmonCaSuscdkuICsH3Z12dnOhFpXJeRFVtkhp8jyvu0GTXFnEcmb+M6fwze\nF9LS+3Loh/+96lk2+nGxgvnu4z8FvfptQnS0h6xHESfZTePfKJgcP0Z8EeOb\ngitgVqR5KtJudSPNMyordKN1WmAChDbV0hxh62A/0e77+lygwxU07z6640uh\nn78o+Ro2hFcR4mVgl9l7RhgQC6FT2cF3/o+iZjeC/fa56in4GJ1vF9vn8i09\nSOByZTQif5rPEHz/9gwdZV/CwzXPKCNtAvCKY6refsYSZVxCXinpvTm/er/A\nTKdj\r\n=JjCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTOZRByVNkN09ktzOoI7zWcbQzhXgpSq3S+tfWr+RY0QIgJN4+uALUst5kMYaIAJM0APq5XnT3kX650Wxi7gvKI3M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.c6870f20.0_1617320533262_0.46650902496150115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.852f873c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-ripple":"0.21.0-canary.852f873c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XAzrJ2NUqLClC0Qt0quXoRwzuNwp7WD5/q5ZCDL+VcXVRsHIK7s6VwiIrM5kF5gIk1++dIH2Fo4WD5mMqgJdHA==","shasum":"82c80f9ffd0b7c7e82ea7427b9fc3d41894fa156","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.852f873c.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoICRA9TVsSAnZWagAAj5AP/AqGWQBdwXKdHBnkjGtR\nJ6hKN8dr9DghNj2e60CCzz48uXeZd/JcsyMTirFKai4gDMEqDToR+PF8h5Kz\n2j+VrLH7I6qi9tpGc5+GDJ/ruE/ziCTN3QaUpF1QdIBTAqPJzRojlF1yoXJY\nVJMu/KtKqXdUinfgd8/7ny3w4eCKamCgcVeanczGrPN3r6rX7c4fXV2OzIpp\nnD4wIX/WsLPwa2FCA7NTCjkK2dtcISWWN8UQ8YeiJ/KBlaBh7MnmzlxPg30v\n2ey5kMS95Eeo6My7EQaW94NbZsGpzjqzoCtNNiRWjZz8TYfEWseG3tD88TYT\nGbiW5C9G3xM13waKl64ZuxG0LefofqBenZx7i1qcaOzBC+5baUf4pRiilrUk\nikdUwNSMVAq+TvJw7hNR40QjBTG1tIR0Dj79VIhpAgjq14Elu1VVdKVCtRkU\nVDM65yMgdhr6zfbeX2pA7PTXw+NuKieHrVuL8kwyANzsW/hhTGlB2GdDT1qV\nF5+dE7UOaAIFcQ5JPkmcqj7fyHM0BNzYVwUzqG15vvB5oel2ccUo07hp+C9A\n3ALoaixQHMOx0aNinsHWLlSoy2qqdtXhDX3cnjqQLs6DiIKwy5l7W22b2VIT\nKfmMQsC/RJERdAsUSu5tqOqASMm+zu5BQz6HWgjU5gfJmDSqGIDsNqqIFOBe\n5w8w\r\n=YsLT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTzpak54xThQrOikT5v4DyUVepLoGfVBXyakjnsQff6wIhALjeo67INWo/aYQRDtYSbDb+M/OJFzonTmp5Gz+vZ8uQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.852f873c.0_1617340935612_0.9538245567799406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.4a674a1d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-ripple":"0.21.0-canary.4a674a1d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-oyJ/504B60EaEnc4BQJKgqEh8Pk4Po3oelAgiCJ3UoJhX+WDEkBiTIjljBDpLumN+UcvjhZQYpRhRvmo4gEokw==","shasum":"0c58bdc304dceae130f6adc1f96340a1edcfb75d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.4a674a1d.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3NCRA9TVsSAnZWagAA5jgP/Rc+wshLvu+f12DYipgP\nZlwQE1EiqnQZzBcHJJX0ec4dblJhUmu3X2Km2f5XhOyPrXuOMOJMEVYnsewg\nrmjRDnnqp4QXjCiWBQyptYzakOMGDY/OoGyuhmnEvEC4JLkL3/pWZcolKqYS\nlim4vGfzoapD8LAvWdOBu5PXGR/NPvwfQ+ui86Y8raiqqpxFUlJFAyavHHuW\nvHRptdl1KfkWJRTaIcBI1J0twNxhdEDyvJkHxqVUJFHrqX6VaRsfDi6cW+j0\ndwy4UVlmrMEAfk+nm90avj4LOVzSu2UwaxLDIvRlybAlz1Jf3ppO4NOUaXcK\niKSfxLy7Q4zLE3g+yvI+jiLdjrLGJ885kgPDzlH64k5p0qgrJ8wQG11s+oDo\ny18jdXK5863p9tZHU/VJo1t+9BuG7uDgoXUZOGfjp64VP1SLMkoruNbNIOb3\nmSCsiP3i5PktTUgayTEjCS4+cVjd1vojIs6+2ReaBkTva0YVszRCXw6Iakii\n/hJ4LHTJwckLafkMk6WjO1JAayvuvtUZJEVaI/PK6dX8SQC2n2/dOBxb6rRe\natpisV88qOTgnVTi46fYrBtKbPxkwBUOrVkcqNg1P8erqCEMqte4z1al9jWE\njoKYSHlTjnPm5GvohpPqLFPqkaRgdE/bHCw8JJIG3GYejlxoNe4HRrxwISD1\n6uBL\r\n=S+W/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKpMZYTVpyHYTltWbZWEZQFiFCsYftkZBNwEscHMkfMAiEAvQ3GFI+1zvyI1bQH+ma6GGJ2YJOn9hz6rj5EE1Kc/R8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.4a674a1d.0_1617374668677_0.7118418955627555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-ripple":"0.21.0-canary.c5b29ff1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-59n7vC9fTcl85+4Ve+15L/9yQxiJ03cTi2EUGaC2Kz9H5GlOk1576T3vbwnP5LrRyWFSL7sNtJFiceJg5zEm4A==","shasum":"26076420909745b9d8528d4ec51b992e75ba1658","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.c5b29ff1.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03PCRA9TVsSAnZWagAAOZsQAIXVYisR8zKyEQs+6k1p\nfEWJs/S6hnRlJbqHRUfhp2wUdjNxPGpTEuo+rtNqQD8OYEkvAXhvF09J6HS2\n9bHKlL/Ris+m0koGsqYBwBXhowIx3Hy1xyyzN9ibiXqKGms0cKwdSbkC2qMn\nNv7QYdVjOLvXW85m1cPOuC0/KuWKtU/996oq5kIvujuWDoCE713mSHNBt9yz\nszAbRaDR24t7Ht1w0papQQ3uLgkreeW6ZDz/o8+SDa67D67EsWYgI5yvKBtq\nL0FbyQ2hV7AsavJ8g+tTcX821F08+TLmJFKg5i5dDtVvfqxsswyAkmNagZW3\ndroP+1eK+1hRq2y28DQrR1kLDAX4bKyvmNk/dhizFxGNSSIEfcD8z6IXC5/8\nlzxqJmgAFR0DoE3PSRgzBy5w7REu9lEAKCCMxX+QrwP8TcFyCUc9XwPpN0/Y\nsZ1c5Y8VTzNyCqiccflDak4dswaYTUjA2THcplwmBbe3aZoXEhEPIXLLQo3W\nMg4BH1EnqM9fR5Ij+z4YCGyfV//sARcnuoKdtIdwBx4Nxy5nLogaYbHQpmPt\nHnPIFtKWG1IWH75K4rvvSBbWUHzfqFgJ+APdsDN7Dy71bPs/cuS4uIii3RDg\nzTZwMNuIGrxMpigU9BIIp7BGspBpMuQTEgYOmBI9/MlYGkhSi6Z0WXOcguNw\nPJsV\r\n=NvKN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFF65DipIWEBf3NwDIwMCMAb7WJAl0tA3b0kImxnYdQUAiEArhb9UUYc+CdhmAOxGWQhqkX+Gblk5Sny6+7xCTbcfRg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.c5b29ff1.0_1617645006604_0.31348856317156115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.583644a6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-ripple":"0.21.0-canary.583644a6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MyxNEcVwh8u0QXyuySOs3PMp7h0qjYdCXhVP7PrLnHtAYdCFc9JZHuG+D3cS9c6QTRy7lq4VIPcwTGWPq9R1YQ==","shasum":"8502f676dcbbc28ddba48578f63cc8169ea1c49b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.583644a6.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04QCRA9TVsSAnZWagAA79wP/iiQtDoT0YYpK+kr/PCk\nwEo2pSbpjqfmpFBAuCjw9/uVPyjmf0GMUt6CLkx4IUoAnN/TEtp9YM7JsH0D\njiZA/4EwwRvY3HGNE6OeCFGferaQ8t+S/11NXBU0flju5Fb65+9Bdepe3UAp\nhHbbzbpGPrt3hspYQHOtZsF33BlBKe3FIysHeJTzgR1bBRQgaD671YLgLqmG\nSEGVde/llyeFVUQw9qCC3SJZER3HHEAPUqpHhOoPBa+Vd0KeI17mrsSDnHc8\nxKlJ4tIlVTVRtnogMIpWkzs5rTl6TcTV2nHxy/lz5lFvKaOiYDnnRs2vwTBv\n4qMhXyRDyy7syda1ZCuzPGEQV1EBgD7mG1LUsXKWNkY/eb5nGX9cTc89XtYP\njyEtkVphlc+HyzVC7hVDDEymcOL8KSZYhK/6cViFPC2SO9AisgmjFNoqtioN\n7IkTBlgjpe8U2f4xrNZk+9U39RqYK2aYa0zldbeFay7eUaCJ2u3G86iqpkrO\nX8lvKeJp8rH9fNHIl73T4ShQPZFW5Fga5ZtaTtPFSwjdbMxnqdnlfvKgCpwx\nvRraz4JgfYrnmUYO5pm18BGAQ4Eiy8Z9qP0ODHdf7jnlYVjvGAeh61Eyd/4C\nD1iw6y83HnnjgojcXAuUajAnonXc1i+GnAkisPi+Qj+zXZhhMAg3IZOlgw7h\n/7xe\r\n=fit/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzXKHc4zP4YZEv/fx18XfloHdABaUwJdqhiVbzi3yG4AiEA04hf/zO3sM0CopaaubCslbnFU6qE5I+WFtIOuBW2xvI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.583644a6.0_1617645072003_0.49536666181610745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-ripple":"0.21.0-canary.02ac1e6b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zQ7yHejYS3OXiBesIjxLtEOhczSbdWrbGttFRmfh6UOl+rIH64TJfGlHNh0PAft9eKcOQO9Yk2ITbnCt3xdQMw==","shasum":"36149b754a8cd4c5ece9314cee3ae54b1cc6fed1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.02ac1e6b.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKosCRA9TVsSAnZWagAAfQgP/2s73cej32YTq92CeLZQ\ndeJGMX5ojz+fwBQH084t1NVF6VN/A7fE2LH/HYQVKlZdpw9TKxC6qvTgYe81\n+ANO/6Z/oEc0mv76wcq4ezjY6V6OBYxbPd1zxP8Z2i4/BaG5p7hyNo7VyhXz\ns/pzXSgrzVkaD0RymOk6bZ8P+CX1x7oJp0hAOtkKEFtethvFMdfazz45bi7g\nGN0ez61AJOC4SETzGeKtGMfgLNkBA8Ems56Rd/laOOmCFucq5zVP5YIHmBiK\nh2L9U7bli0sBUeuQw2ZjutYYhzOAyqTgJoK0o+EjQ+skAU4b3NfrYM3dc0Cm\neqGD0WLgzUJl65U8/9k1UC6WQu2RHFMyWRrFDcAFQU+N6FfktYbUby4reDY2\noN3UTTrl+Ogd/SWMiSm1B8XeSPfOze+LBFp9I0Da3TMLjPLL61Svgi9bZLks\nVs09Mz66spHUPAnmicJpXOmzy7uUQufHSEytk3EphFot8aqYxd9RNySj2Ls7\nA+zZ8EOYs9PTBGBtJo76j/hfwuhV0btCPYmToHg2nj51Vs244RxY7gpOnsvH\no0unSo21v3EHXXo0SkYESwssT14j+u404GVz0gSf0L3tPzTa5Da6XVDbCtFi\n9EPLIcqLhva9jRbBKazgv5F1butqz3rIs/r1X7yQ4Dx3GNb4uOaKrK43GxiT\nBCUx\r\n=9ttD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFbmCr+2gZ01VQcibeztknFDTvPNwctJVXMi9CIs6TkQIhAJU8RvTQFvRJ4yDUGDSMFGbCTr+pIRJwfM6tCs8MQB3I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.02ac1e6b.0_1617734187828_0.845969388197614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.5ac5856e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-ripple":"0.21.0-canary.5ac5856e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dy3SMu3f836X1ZH78CEYMxCxBsNJ6Sdtn2rQyroSlAFsd+pFMlZXvX0CjUUItbGMBpVbdvsujrkyiZWrf63wxw==","shasum":"10f20925ca7845da1149cc575e8a3ca9435411a7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.5ac5856e.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuqCRA9TVsSAnZWagAAPR0P/jpX+KqR9ZBq265VpN50\nuTzn83kVrK3HPoFI6vdPfkzWM9x/TRPZewTKy7N98lF5nq2AMEN1XLBu168H\nZlMVd+4WWWg5RfVX0a68bnfpsF4AFb+YbsW/CuYCkcILqGTUPtpEMUZCAc8l\nHf3CCtroZvy6oXXzzJHH8xWv6e6uOQved5vc5pW8AsroNfkEkebBLLEF0uP2\nBeNJnbhS3TkngSAH2ZNOozBif7KgBEQGubMU5oA+321GP2z8g6G2HYmlHEWB\npTR/XpwIiFgg3+2QpYUSgcBRV2+wC3oExJjMwT0A+ii+OeqBEmiSj/4BN0VM\nfmLRLqO7xf37QAipIgMjbt32+qwV7E1y3Nir7PLo+g8Y0J4zosD5opqQsVJp\nMk+B2ezMuvX99e0iHAnvluQWczi599Z86IJhYOilHcmJ3iUeGYImns4D6C7/\nVVP3eNVtjID/6uzp/XmmLNLByOnOCxmiD+bNUQzmUJYGCV7ijCOAKvakxzDV\n4cc7d6HDg36CzgxRD93iE2ofgwKj35kSUecJkeatYqeyGOmj1bXivf8Z5wNM\ndIN//CnxBhqguFi7pGnmobEX1R/HS2n1j8o9cxXNqowPySLsQOJyTmhZmhdy\nxmznDPMUx69/V69YNrqCnFICUyBVy2ieI7f3gvNsUSmHJxheTv/IUtk1NrYW\nCXA2\r\n=BU8B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDX6tQTAzHZJVI2DvmLL/kY7n1jjaTjO94G8ABWO9R0gAiEAtiVpr5pOl61ZszjgPf3JZClBe1QfZWYWbq6GHG6lnTk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.5ac5856e.0_1617734569705_0.2907312865340914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-ripple":"0.21.0-canary.bb23dbc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5+rQRqs/olPa7n3eOj5K3//h3dhhka1ZFOq8VshEd6JKxF4vnOgW0wb9Ss+UWyFxAtz7zdUymGfQSYVxxaV0ng==","shasum":"4311d028e74e192a5970f13ca3898f68ddfa4a61","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.bb23dbc4.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLsCRA9TVsSAnZWagAAuEoP/jB/ZVK8Ji6YzJE/mW8s\n46E1a9gz0dgr+e3IaSNSwP//xP9ebLnSIcfAaM05v/AU85rel/gGUtI9oyOk\nl+4U40LU4soPROsoHbEwqnBCcchD5bIoZDUzAMPW8nYNu52m2ne7j9pZb9Ci\nJ8kNON3YHP7Wx4iFCcP8bfGmTCZUdS72fBfmxOqCkrj1U7nDMOaOVVFH6DXe\nVZvGKqpHF8uGO3x2PARBxMojfAI5Pgith9f1wQssEpp/yj60BBWqb7SjTShA\nsfwEan8HzwX9diK5rWtGS59ntBHDB55QE9mR1pPhlQs1/r7zQIAz03hO0/ar\nLW3tNTqzM6N9BVkrhY2pv4x4E7Tu7RSjizve6LKfRBJ8EOj57IG1hgaoPpMV\nxtolm8ho307SByEKlb7qX8PbvdF2qW9cV/ReFTjR9fJ3R+pfbdGSKzDYsAH6\nxUJIaE8tMzrMylRTzeLaSETDf9ecTPDIrbWrIp2lAmgoldX9K8X4W/HkHmEN\n7LxiYKBxLc5wNUXQ0eqX1jQ8+AUAcit65+W1TOCarRSIXBkWZFzrsf3zcBxr\n611fSoqMYdCIBBTW05bBvKn/vPADFmCUA201aQnyWR7HZGs+Lgr+DLtGjfxx\n2R0+6McGVYK/nCZdLpLjiiYOPNi684PzLBHrgwm8yrAGnsTxIQmwGKl0EMNo\nEAgz\r\n=kbIY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVhxRpkxp3G6llb35tfr+wiBmRyFxHo2TakhKiMal9nQIgFFW7AsZiLainWk1Q/BFp5T1R/ZTmu4RrVRb3dXUl8hw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.bb23dbc4.0_1617830636269_0.8670277717033452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.e539904c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-ripple":"0.21.0-canary.e539904c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-S7+rwOslezz7kI6TIqC+q97zelRzkIXjq3sXfkviU/c9pTXVdoKBJuLwIguxb0+mk2BeqyITjTf4WCmVmxiX3g==","shasum":"a2f5a851315ff7716de13d045710a4ee58d8110a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.e539904c.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UeCRA9TVsSAnZWagAALPwP/jaBkQbSyHOiVSJRP4CF\nP/KCqG6MzuKXOj//pzjEcd1BKjYgOJSgB9in2rV9LvW7J5UirRLa19Ta/XRU\nLqqvrGLBEjsqK6Slg9A7PDw3M0fHniDeuF2He2rlMEl/A67X2jb2aBIwTZkB\n5PhI+TLV5euf3ORBKxgiSrddy/gG8infG1AyebyD6ORETy2NG9f47YU9wE5w\nKIU5JyAbKQMSS10KQ0DAgjw8fxSkkjLcjvWJlGo3lhm0nf3c7cw510wTc+8D\ncw6kymNVpUI+ip85i1xpd4Hqv0AfN/2xstcGUnFcuEI1RgnjeIXseqgrRyiu\nXNFl9uCSGWVHieFLUN42kRNzv1HkQZpCdsUesigu1RzLXKKR1yW9ngna0AVr\n45b7NGQaj4v4h8BanH7ZllvUZHDbB2DTce5Fji8wVB7Q6C50K2DG9wr+HwSH\ncgkeaQx2aw8v9DFLUYMOclNUFe1xusay8ABFu2Ol+JITtSyL11mCCNpAM5zY\n3J70f2NLGckwCpNNVv2p5aVfvsYVLZ3XN3UVe1m5ZL0R7wP80bGPq/OPmh4c\nZycOO28FpOIsD2At7Y0rYx3o9fnygw+MaYYdJGuWeSEsK9Nn5Vu0/lUKgL1w\nodm/3SwYKOCz3meIFb8Nrnz5v1TGRDhDi47fsqHcnmpBPHyXleKSQ3DXL8ov\nbU7T\r\n=I3TG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYuj2fjetU0VBsZIKeisYDHuUf4BxgMT+RTxmtpe7YuAiEAwHhoYxUm2gzq3cFyU7DHCibiQ7qiwvG7JaXEmqGZ4MI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.e539904c.0_1617904926379_0.7532234928420298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.a93ae333.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-ripple":"0.21.0-canary.a93ae333.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/dAM3OxgebYNd8p684ychGsJaDUQ62CMTCICc5pEok1Ot0mjTPdqlhf+OdoOGAzRaAKkaP5fRrOFNaNWW9UvAQ==","shasum":"b61e0669ed6741f440c7599b7c76debcea9003b7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.a93ae333.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLT4CRA9TVsSAnZWagAAuWwP/RmHz/0pJstZBDrJnhHK\nmrcV/lkvQcpq2OeXHeSvpmNHlArV2Gyp4iMbJYb6g/yo8c52Fsw4ho9JQ9vq\nLHZ1tqbEtDsEhEdS4LAngYFu6UVYFVjO/IMMBlrtU7uX8nDriJO5mfKnfB/u\nVLd99WdSTGfYL1fyysdYsL9Y61xwr3cCa3bDEXOM5yVyDnfAnkwnIBDTcgUS\ndwRlW+ghlrE9N4VpqnBQTnZYh8/0SqvQ3tT+D6oNhYsqQJkqHe7DUL08J7Ki\nROmuInVvl6nFqdS3J6VH8kJ76N79txSQtVXAN2WPyKBvVV4tIJ74OXoitO1J\nvf3ojD+93MvDISCbq9sqAnFM4Vbnny9+Jd2f8vIiaFmu2rzdvpuwNxgoX1Pu\n+azpomOxbrLKP3cZCo7RUYCXyoHjKH7kvzkxoPu0iFKKC7Qc619tnwQDAM/U\nkKIfZxSEecmhgSZn01CeDwvB22YAJEEy9HN38HHjaxC0Tnum69jTE01vjFrQ\nDAyQ3kLL7ZwNW09KcOeqGGehpodv3i8m+FiP9dKABjifJoVcABjsnKT83nh4\nyPT7cs/agzn9o6SQG0GrxnleeTTxwchUq7mDJyLzFAIre2lF12zc1IPiTT5N\n+p9GBZmFPsG+R29xEleqfrvwex1tQt4Ipbf7da6OsNKSQrZ7L/nj1q79q6+/\n1Iwb\r\n=zKmA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3N3JED3C8nC8hPNZ9oMeOHBd8L9ZQCC/4nHxJGA4hvwIgSGqAsJLUMCT/yoWhq3Dwxb+tUxZRnW5oLY+YHiKj5ps="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.a93ae333.0_1617999094567_0.7414538810125935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.e142c144.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-ripple":"0.21.0-canary.e142c144.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-x0EDHsWNqH753SclC7o/2A/UCaBJ2nPVmQcAHXONb9m74aiywkaiRIjR/lVwkNbmnz2z1hktxVoAE4eZkEVCbg==","shasum":"52fcd9e011c940637dc90bcd9332338965f4fe4b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.e142c144.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5DCRA9TVsSAnZWagAAuigP/ApsVdSTxWLKtZGNLhZK\nmSmmGHHoldhC80tLLdHVglui1qJ6YzWkTGqapsvVzVq6U20Wadu6pyM3gXRq\ndrgndw3qU6xXOhYoeKnObfABCfejzZea7sj9nOcRIbfRikQw0dNYCUS0hcpS\nKuH/MZ38MVv+pGtWcqpVP+SvwXFCRmCoXiCXzWS6Cu6YMr2ClhHmEnh44scz\n9IZvibHuYcSbdlvX9empC8DdPChcHxip4yRKchaC4RWyd7G3uz74GzF/i4Ti\nw0xHBvLidafd/TxrcbDP68Eb7l4hXDZ0iWqF55ucNspRyUOS9C0aMASpTLSe\n0p2Ht+spPUymG7a6UfdG9bm6p+k29pPBDWB1dLKlrYi+SJ4DOMIv0mnsSupV\nKaJV1tYPDDWOtqzEAImz0uiUWTew0jCwK1Hib8b7zyT1zIe038nYrEZx1G6c\n1FGRSkpocp8K8Ivl4S1qUk7+ywUOxmhi7zpEndcwCaxVN7wBtQYXSeD/Z5Mf\nqMSNC9fWQvg+ZIIN7jmBtK6P7H4EJyWgkp8Vkvfeyes2755EwqWrKUeCbtOV\ncgp/82Qv2zknR6bR0mQoqKzAcTc58VO5/TUz1krqzF9/LgFcwI+d+7OZuL1B\n/6mBQmIV2c3DvLm/gR+T0wHaFTODrLAxo7v9vLSLJQe7CyYqAZb5YUiGE55n\num9G\r\n=lAM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFHq6Bqal0wHR8xxXy9QuLiiHximtK0lMx/PE8HEdE3gIgFl66ngvT6nlrASO4DlqMtHHz1YX5+/NrZEMLWqQwGnQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.e142c144.0_1618239042852_0.41945232475283656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.382d7eb0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-ripple":"0.21.0-canary.382d7eb0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xLLBjSdQ84UV7vKKSBNY2A39XNM402YkWxG/H6Q8dRW0ncJcAuoArLDmAVn1lY+iWjHpV/c/06mJ0HYLE1hvFQ==","shasum":"fc7556329ca00cf3dcf171be4310becfc6b92a12","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.382d7eb0.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQvCRA9TVsSAnZWagAA8LIP/2EMX0lGBGWMP6dYc2m9\najBHpYN9cA1+wXfn1g23FCvwXV/0q33FjnrLIpSNBZOyRhVF+z60YUz/SWBL\nao3jRmXPqf39EZbUlxhd96FPnEztDXj6ZlT01VagYMCvKs2Tdt462vJjUr4D\napbibAUHUk85cHYcAkhJpAdS1u0o2RuSCwWahgHSDThFbC78NrDaUpLY6vYR\nDxeDqX417yt1j1UnzDxtKxD0dpyCc/gkVg4CsKCe0CtXjEE+Xj0rju2SLzpv\nL9rejkVKhIhQfn2m6a3yigFirRjX49s4xcnj0rzuTXWowB5GcVZGeci5rvlu\nMhwjLV2PlNxF9ZVlqZkmaPauDrjTKqc+hdbw//moEjmdRLpBtpQST0CfHNFD\nNOGD2Dn3FoOisRQuxvoqH+8pdSUktuOfOTH3ERgnMkSl0+Lp6SJjI4/fip1e\nq99dXz0PI3BIKFGTrgI49QlrSyF10azXakARWMlUQUPVnXYgfI3ePgjQXLUt\nc7HWoHPU9dQEZnI/UoYvL0uS6JHu4mrPaXKiQyBYOn6nGsqGdomtKhJTKEOK\n770qa9dq0GJXkvLKQZZLy1jvpMZ8kYdiea3Oj/mOt9NUQQG+JIYLUQKWzGpS\nB0I2a9ZtrHbM0tcAApRYfsfPN95evyENdQshy72yHt8Dp12zstEiBgs/KQZ3\n15Wd\r\n=ZvrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDKWopMQjnhXwpwO8U17MYE95c7uvUN1cAVr8PXCenEAIhAM/8nL87RcE7D775z4H6FYOKau1o2NESKhald3AgHQhJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.382d7eb0.0_1618265134861_0.9343779675631343"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.b16c7885.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-ripple":"0.21.0-canary.b16c7885.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-67yGSYpw+YPBifMoqQHWmWTmrYAnAS+Ih7rLCfB7KMcq48GNE2FwzklgF+h/0U3NOzwV082jGyIAtUA8b6i7aA==","shasum":"c874abfacd18f872b9b661d570b95a28f37be211","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.b16c7885.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwTCRA9TVsSAnZWagAARL0P/05bXNGUSRD5RghmMyMW\nkBaG1ZyVFSswkk7WU5UF8c/8O7QHp7wOcgOyfs7WcjAGFmnRaG+cpqYleu5S\nOlHPPucYEJQohGEyW4D3jRQ9wbHku7bUYkrrB6jCsdgaJkiezRmRsi6sOGKd\nB8VI4PJysdRkyHPXf7KVPbxxdYUyrqSgRQUTJkLMCnd7Y0Ud8I7hzAdgmWJ+\nY9Dc7FYqD65G/wyQTJrqBGHYDj2V5H/WyGXgQshVk66GqLbZSXdNX6MFSGsI\nyicy5E65zT8qpZPJEYgWcTlSlhCpQSJTMyB9ovD57JNYV4tFDiYkBVnow0PN\n+LbuNV60j3R1BZMUmjY9iUPFo9s3xMFZSeo3E6SSEUACxtaQaakZyjHFABXS\nwv4NCyOCk2wLck2cW7bRmjVOGhzCtMs9uRt4sV0i7lUldmYeREtWqMCjsJPV\nfIjR7dQtvGBY2EVOHRnSsma1OIPC/NK09lUzzpBf77+N272dss7dQO1IjPqi\nNK+lznF7eUyh8gOIU5y7vTqy36Dud1Twj289PjmUWMPK1BuWDS3ovWh9Fy+J\nhNDXSumZ7deszvo2WvO6iJDt3/wvG8fTSTn3O1n1x+pKogoxVCqNRt+PD0BU\nA6ZjOczl3b08m5ku3tLwKmMZlc9PEGPQfjtNdDTugy5e+Qxkoa7EnM5VM3JA\niybg\r\n=8RGC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7aENXBXXw2OKtlQ2OHfst2F/nPvd5U5S1jKUq78l9zgIgRU7vFuuCOEBAA2qBmsHrlr48jCKTumkynPz38oNfovg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.b16c7885.0_1618267154948_0.8454333551532984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0e92782b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-ripple":"0.21.0-canary.0e92782b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JXswqxbiyxy6Y0Itf+DtRrc/pXEpW/oYhhGRRQaJz7GvVlxyDFrrwvdatCBNI7zoUUshoWLAMB1CgWN7Rf9nCA==","shasum":"b3440e0a1f226290b0f5936da5ccb5297f42fce4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0e92782b.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda22CRA9TVsSAnZWagAAh4gP/15+9QATGHYe+VaTPiO8\nRjZTj+39qVFmYEZaLfAcuHZ2ZkYljX6xRkmTkJ2tqEhoDk715E+GJDUkDSHH\nmig2Gd3Wiwa2z2mFC1hPVsYD2T8zvcqR6EuOEY01FfTpRl5ykOeVlc0avJiP\nnGJ7JU3EJUwVv0m8XQTJz4H1negrwkemL6ksyXnssgc33L9Yn4ZAwJni4PRg\nXscB2crnIQS/ezMhO9kIzOq37QtEf9bEkeiLmwQSFj0QtvPxW9EEdasK/i3l\neXzZBQmIC93J9ljj8IPM9FhvKK6RX+RhfhoGuf0NrF1Lv+SP7XOHm77ALidA\nWUcbQy+diNIEwbpt1zpldvItJS7E3onT9MdotMSZA+a3ir9/NtQsPS8II3n0\nY+FgueKFCel3AxAyU7x5BNyrKDmaRuLM3u322kks/qyCycjyXkGABowGMYlB\nfwkPLiYcFcdomSqE6N1ShdDdiztyg0CSrVWhlsU1P66j1WbK3tSmwGkAFWEI\n2b45q+YSrXCI0XbOJR5G5ScxIhBrPZAuKB/fnLRzCfjWbGrh72dkiEjUMh3E\n8Zo2oWu3siwc+89AFlb6jCOTshmAGoEAV35Rvkoiwl80tCtV7pNp9PLDqlK/\nlyP+AEboFXJf3HoHWEUEbS99f7iYYA6ws3V9ZUxE7kDj/lxn4ncMNsjXGO7m\nXPHF\r\n=EKvP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdjZ19TxoZJ+11E4RUhnDykIRNDLQ9UkHGsKtrFV31jAIgWJXvOsrumL+znYlORrmvlwIk9Bc6MWwLtplAoW3bz0Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0e92782b.0_1618324917860_0.07571828539907077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.70b3a072.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-ripple":"0.21.0-canary.70b3a072.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ATDwY+DAJudFSLEx9/gMWMomq67FvZ39xPpQ9Nqpa03k6x6jY3rgvxMo/mgwG+zUvR5c75dADXWusqYzavGpMA==","shasum":"5fee43c5e84867c2dea147d38ae2073f773a4157","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.70b3a072.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wNCRA9TVsSAnZWagAA23wP/1VVQzwBWCr4WgJXKJA1\nq9FNgkcVr63fZbmN7Y0y4d6ttGCcOq7tOCmmmuJrWiG0OflXDScqWza56GUt\n7Uf6xfM3aLK8MCVueCgOTltR44urxoEUEeiMbmuQAuaGyhu4yHoa281sLeF2\nHBOdrHUnTsmcKwIE+I/deEz4ZwL6NnCE7YwBLLfh/l6R9HEfMMULhHPz/6Pa\nd/lK6neMfmAVU6acPfvFvitiWwfyTlUcaR3J7XQ5Uq8SgsheM74LxXeKorwr\nBvI/q/8PaNW7SGEE9Q3vkGRJruwlUDZ4bos/Iauvj8n0uswuQPtt48rIURnP\naQKI4xNkCUiPkGX559FXTf7buTux9raIGhTXOB5tgRNTdvOj2FGLcl9ICwTs\nVXb/NCbow6bNnyO4bf7+ZNqqQjro1mmlhgIdOLzPmH/bWTe4A1BBPflexc/L\nMLjbI9oNJVFMSNMiY8ECS/1Ot63GnB+KgzwWpZYlHoMm+5uCDJKE6EeI5oTC\nYDp6q/oJU7uoNaJiisOsUuxY51JigeAq1rbYdXBYlvdrnR6zyMu2Y7bc+hdu\nzVpgd5xj4vsazV4lvSLqxRVM+XttKh7QegHdZ+bDngmsRm0hStMvsh37mTVc\nnz2QWka0r8l9d8q5kZ1mMGiuZAfZpvzKAm8W9G+XSmunINPySx/Qp5A+vS2K\nxbB9\r\n=ln1+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcOi6u59feIXu0zmcGgeqh90hbQ1/yYKjEJud2Xam4NAiARxqGRqTlF3LgCyTWLREv2/AjYnl6HXPlP2D4ZqOB/MQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.70b3a072.0_1618439181069_0.7925296655777305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.ff79b092.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-ripple":"0.21.0-canary.ff79b092.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UxpoyTLIRjIKudRYc4zsI9KXAoIWu5RNhUfXU5+wkv55YuR0UmetIlbQ77VcWDOz9TxPMy2aO5tKqDugDnIICQ==","shasum":"3ee08e26f08998ff9cbee69b873f801e010587fd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.ff79b092.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0wCRA9TVsSAnZWagAAVHIP+wT3RaiIC+Td1GFRZoic\nY5bYSjqMOncN2F8KvCspLjYe39C44MbcyyJKzZRrEFL4Y6Cx7cCIZTl7Ktuv\nvCczQkG0h9gSq+779WYIkou6byZ84OtiR29ZdAK9ZuyCex7yS0XD6AlgVfNq\nTBc3fiCi5dANRJXcpBo4ohpJz29NVGuvcArBJhRZA0g1OZWf2tLj8GUeWyEQ\nQnP1tpy6NhQP/8mIJ/wudrO1D3GtxCV1dkhZoGYIYIgbydrzsGrV59UfNTJc\nSYt+/4f3LJSACtKxSHvNXepIvwhgYMUECuZfLE+QOr5NGipfbr5X5R5t30ew\nwIXhmJCkav2Forzk+lUBPn5HZaM1rzPrXXG/YGEc6tN0aaKNfwwqtbkfxTrH\nI7mlAv6k/xgQeKpUjpCf/L+n4CSJrQqdthikrIKgI49XQvakdfw/H4umW9U2\ny0Qvu2tfAP0CQPNBWNdErv5IKzxi6DnGqrCWAutkwUqoPgoYTB2vyGYim8XG\ni8UgZdvsvmbssVJ8Awxyav+o14WD6qhwS9TGJqHVMpz86fqRLJJ1E0za4QUc\nr7vvHNAakK6eWj1Eq4zr+xD0BDo9g1RgIs5LUSW+pckKSEIXm/k2tp/BYGot\nbRiv54gwZ+td7I4YReSQyxmUy029585Po3EBtGr59eRNIbmnJjDI+YUlwl4g\nRlcZ\r\n=SZOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALmXV7TKgXWnM1NuxV1X/JLf3izAIXP6OkEUy7Ca7DGAiAIZTf5ZNOvKJeIxLG/cQa0pIj7gWy2q7UGMJC2h/ON3g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.ff79b092.0_1618513200160_0.7855729901670276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-ripple":"0.21.0-canary.f35b2fd7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vPhuAkOUucibvXyQVICKiZwD6kCAzkVzdpTkCE/V15WCBhkVFSsbS/Hh9gtOCAsaLHCp59KWzimUwoob31yD2Q==","shasum":"3e108593bc3254f6061b60db1034a8dd2c8daf30","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.f35b2fd7.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+hCRA9TVsSAnZWagAANdcP+gN++4BHLxn7g+GERrjZ\n6n9pvDreUDO/2xaE5v5uj+6fLOYQXQZbAAtzR03P1aQfKR/ocArJJrS+UxXc\nBaMWTKyf0yPTzpHmX+X1usx/Zd2hRaNSJN/sSTVrm90/hbKKl+YRcmzvxmr0\n37u1z+/NLhymBdEOSzx1D8DBDOYsEAeQUZIQQLon71ATrfpuiog8c7GQuyjn\nQQ7ktc9fAO7zUeERpp0Dr1UYJdZZJVNPvV7S71lUiOoFwAYCSG/BEBgi8V3V\nqmzvaTbP4MyJv3oHpqcQ4JPigBl19cfgmrDZcu8Wm+1/JrylcEM5GZrf9sKd\n1jdQgLSLQMX/tMNxEj55pnxsuZFip0zcMuzkPbjE7ZiG8+LuZCCYifD6ontq\nDYv8VDy52LCg3vrjgH13Kv+Bpg3iakVdWvLIq0nEhFsXX3mFW9s8bJ46NZZ2\nm5N3b43AayIfxGIZ7kaxfwCaQkCQ1lC3V5F31iDYtY3lijToYSgnSlDJHvd5\nomnZ7aM7WxVXP9kR3GNBXR0alCj31aS9RhlZ8F3fQDKgOAneet6PEJCE6CU/\n0yvBvBQeR1whFgIGJ7hbrIFu1yOwveqylXhV36Yaq/mVur0by0GnIR/lYMIS\nbkK3/L+7HtycSpEXYK80RcIZjIYn5079ekJnK0nAXsBoBAlrsqJlMvmZVVbk\nfgb+\r\n=jL9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTWK1vNGsBfuzysqFOUGlzaPHTEeYg0bjdDzLYeftLFQIgRRXj+HJ2Z/UW2UMUZ+ZGS3zgUW2KB1Zc92z5+eFZ8+Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.f35b2fd7.0_1618513825599_0.05553840072981209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.11977cac.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-ripple":"0.21.0-canary.11977cac.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pfJQUaqFmZ7yvZ7yHSpgumh4/iYkUYoKO4nSwSlfMGb+daZGoWXgjPdknI1mLFvuFmV8FxpbExJesHU/Wk6v4A==","shasum":"a0c29f79d02615bf5155469c97d396f2f23902db","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.11977cac.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEgCRA9TVsSAnZWagAAM/MP/RSWa3lOrGxRsjG7YZsU\nW2o9I1enNONIWVCCXjRLOCuypsTFOfA0Dd900yqcSmOdSUItAAuBYmIwA6Cp\nCXxGAduRTSBNrnIjrhkgGdZDb1cq0t7vaFTt7Vk0vfpvWnnxLcTem0cRBKQK\n3bllpoOHrPhKEYSoJnPeSvzNAQcjknhujkmhRKZVT19htcJx9lNJYwcF5Pfk\nl0ODoLmVbNByUOoNCh8e3L45cuhgjenBhaMmZHnAqmOXx1EpYIqO8p/UAhrU\nGw7GqgS11a7xlZf9xRY4bWVpF1LvKxVz9BvooUBC9ORYUfQ5nNgR/IHD8j4B\nfwUE1md8hC1fIoDKfaN5wozxlGPNtYDw8bO3tbLlUNjmgiPqyIw5uDcxRN2Z\nIXvU4NttPomZbaPYYx1Up5Qw1oWamTt8CFNdEEEnApk61kZ1eO8LEwXkaec2\nTS21+wCLPS5x8OTDKVIqAqf7ZoKMinH5jIOVjhlUGBkxEc60y3G6EO/PlJGG\n6iRrReuL/A3RQg5zHGMz22Jon2KLzWNAQCpT23wQzTowKCh9LP4hfi+LY3h0\nIgNwvTwxKIyAKFwZS1ajX3dNbgmFA/lnc4uRdimq0nH4e9fJie/o9juFcKOW\nG8LEWO5+wV2Fnc3ETxUn5pIUUaJ+jPQ/HWge9iHubuVQKltQXvpkr7Vuw7Xc\ngwr+\r\n=Z8Ql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTikIsAwiFin/raTnMiWRtf5ZhUtvDHH5zGmHfJ5Z7twIgXC7zXmA2Rdpl2tPNPYPkMPRQ35sgi68n/nnqa8k0xPY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.11977cac.0_1618534687797_0.541390838365698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.018ff45e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-ripple":"0.21.0-canary.018ff45e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dv4sRMcNb1qaVA1lE/F/4UZtGBCvZ64G9dLs8T6eSGa5S/SS5sqV4FBpJvoqnhw0erv1yJNtrJnezq77YW1Gzg==","shasum":"cf3d6bb40fb7d71d7ee70b54bd7ccacb4564deb6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.018ff45e.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3aCRA9TVsSAnZWagAAC88P/3CXzVk+l0cZmDxQQkKd\n5/aQx9OwTuN/zTJQtsIdMgwFW2ofEpGHobS5cC1HcuCUp5w04AAiiaW1LuWu\nraFfI8dqyaBoJ9wLikL7obSYqdDePvlLLJAoDcaDgBOQlBcXuRzWJrOcofhF\nZ/dq6L4lzPDKRT39d2T0febQknNq22W8/9MdSkpiK1JKwiekQT/5aUocrUiD\nWUzNmXoiDipZ9FQWu0O7r/tn54ZoiBEVJXq/XdCDHVZizk1t66Eit3lQaSb8\nD9R3c/9scFsj0wJZtYsM47r1PmFVrLHbfO1ExiSYrpBS7TNKqVXgffYyXPf/\neRcNFoHgxjrCc9CsSIdg+F0p1Ug+70r2J30jHvEAK+cB4qrfAtBMLrKkVhcM\n4n6SMTmIvthZ4oZpUSIJX1mcoAib9vtexiRwwREQ+UxpfA7v1inmo5pAjlow\nJH4Iyv4dkbfHYePBu8jTJg/DNxPuAx+rjVnW93I8TJxqrmpP/J9F6MbiSG6a\njoDn/UEV83l2eLS4Iznk+eQxhvfPzu/EzyhOhxREygattAboOeVzP5PK0EG+\noWWoizYecZMhwtsCqqfhCTyiWv+U5/Ee/PuhxTETBaw8HV5yRKrUX0sDmn3L\n+B/e2QlS9pa/1G/uGDF29BT8wjiDiyVvx4x15jcfDKmrsgXPDjp5rtyoBEjM\n4QjQ\r\n=PnTA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTtufymeiomXk+mqT47AMzx58creZ91xpcm4CD081G7wIhANytke+RXf0LXyhmsJHe2gGP5ueGehHHnSvXKELACat+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.018ff45e.0_1619131865518_0.2955353485588814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-ripple":"0.21.0-canary.c99d1fa5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QX3rKltwZSG56nsy3S9yqX1k2d2LmsYNNlsIpdgomWQ5rShbM4rzi0vT+Jw1bBHpU+58scCY2WgsyzVdlBa1Ag==","shasum":"1df662a43ef57afee02663900322738514a5030a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.c99d1fa5.0.tgz","fileCount":15,"unpackedSize":86744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxihCRA9TVsSAnZWagAAGyMQAJ5zO5/6ZnF4qpQ4LXR3\nv1XVEf2cmPgXoXeflf76zf8Uu2pwtghA5PgjLELJboM/Q6su4H4aXQ/8Eumr\ncZnGC/eemsJPtGTKRro7qyYvIASPnsra22S8+UmaVWvMmfJoZNdQrGL2S/yg\nDoPh/RYgD8vrcqMkcPkF70RrmgWyFP1ZxrjH1HpM+Tf6Gft2sfJu2NmoA3Bz\npbIL6GT6soJb2VjIKhWtnCSJYEuXfLiMCUW5NZJxgCV+demYVrfZcvHuShgs\nfksX9Bf9X1tJsxR23o+breVQ2UZQ3nC8t8Gt9AGw7J73Z6VU9yCYhJqH8g7l\nwgt1vzrqt4VVdwH4UGY047qsTNGcKlHR2ORmUYeFAG81s7VXxG3MN4iR+mJn\nU38EzSeNit9c3SWOcrRFAnUPrICelKx0TYMBCIY3TUsc1tVJO/X1ycatmjR9\nyBPvwHvVznOhZGd/qS1qyLYTPaGnylJSzQBD3d134v+324nG/bUjW6EOlO6S\n8pUk9QoIn1uM+IB70PUMbxpCiGAvAPzBTo4hDbJKBXGaFAVR/lqDfqooIxx1\n9DsnANrJhViumptDWmB6sU9AoYJpnwHt64i1lTVHvaCfAjsV12mMhcvrWZXn\nBQnRNb3qDMegpgua4HVq3rgqN46+nIP4hKVjOZ18K2pfXQo4uBXuU4yI0zF8\n7FH0\r\n=G6T6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkWLVc425dOkrRlIiXn6kNfiCaiY/NjRt95QOyy94VPAiAo832j8caFNcPrHweQFb7zyJsyYwfldDRnXZDx48ylyg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.c99d1fa5.0_1619466400682_0.3088614019120277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.eea9b304.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-ripple":"0.21.0-canary.eea9b304.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oruKyMlR3wrgChT84JIXWDQCXEsBTfOX4+yYw+n6q5ViAfXk09S4iflaSxujq0woB6v2fcfK04gmAmIcL+evXQ==","shasum":"77268b0b678451bff5a270126ea4b3f9468b0f5f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.eea9b304.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXbCRA9TVsSAnZWagAAxGgP/RWuBlmZIJoB9qcoXrNc\n8RlF7ZkbjLJwhGTufEAU3G/jC+RBgn2qN46SczEaXs1OzLX7PAL1b+rCzfkP\nEKRtdGnCF7qfqx2n0Z578VxdqIrYvvd82KB9kbbIGxMcEDqo8Uy+IQrxLhTT\noz/ogagYOfpFeee3B35WfAflSGCAb1Ta1yKnu+AExgjYNS5KPa6XrnWwG4kQ\nzCb2rfkAgPh8I5gix8zeXmhD0iuKbqSCwMF31zuZ7tvSrC50NL6KG3IkbnWE\npDyEYSQl4HiLg4p5IQYbR7PWkGtBIpKV2pFQHYOvPn5BkGecPHzdoIP/Dvr5\nL2Hw7psBmetRK85VR25kGoqH6LMAkCr011Jh1BjyOSwyZLN/6vYwZ328C46C\nfGLbC5Ek4Dok0pVZX14KOszG5cKtEObTABEW2yqfMa7f8HICbmqh/RSoAc0u\n/wfpW1hZesj9Bky0ajAA0rWwWNAXwQjonHn2y6ujiWytSEHZp3jVDpMoTM1X\n0wz0ut/N9jbCf+mrtk9sUrEGEjK6ijkDVAIxZjY1/ALbCScuiIL+9oNAMfW6\n9/MaMKVqmUqn+vhrhFd7Wq82HNaK0EGzax9TMnuCmbE7DqRc9BDFHLTd9/Vw\nVZ0lNcfJvWMtb+NgHD+/KLN3MuSFeeO5+/wa5xH2kUtBRvIuWY8RkBSwskjq\nDaav\r\n=0muC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHShArxrYE9ShAnmPsdAtQj096dg663MJOFYg4mP37+NAiEA6V1hL+IwS0LRnnyy6FrgxQmGg1pozZzYBjhLVz1R2nk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.eea9b304.0_1619563994607_0.8618556362901344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-ripple":"0.21.0-canary.5dd85d0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ztFIW+PBKnRcuxocL227Y3Hxak69ASgucfAXIvXJFiwGeUUYX1WTzn5ZCZJ1GlupKswGRdn1sjG8rnCo2xuCBQ==","shasum":"a9fe5be91ce4dab7e030c3eba2d99cbf3f669bad","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.5dd85d0c.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKe+CRA9TVsSAnZWagAAr+YP/RE4+ffJ9hcPweGAD0h1\nyXUphd9f324WRJZ7Jtj2XCKq68fIfy6EvrCp4OOGqpK2zOQDm+BbdMff852s\ntOaCAQW2qRgKYbFJAU0VmE0YKpGDEGVxzt2k14TEvZCFsHVmXwNpf3jP1x2h\nxSwGCy9C0EbGbRfNp0NWMSDH9xsQYzN4pLn76Hy771jp/vxiVPHrV3Up5ntd\n+2jFC1g2vDm2R1cm+bsbhhhk2O6LB07eotG/AeZ/UAWxF1KkuP1mkUStAIeC\nV+sVhmXYU1eSD4isyu9pdnd6f3HeZP47tQkieuTk5gdQOl8kpILLbo6poxwK\nu3z0bNBN6nJ7VIdot6zGq4mVcNhZwjS7leWHZwk21qrJbr/n5Ka0oQR6ASLQ\nNLwli+0F8EL5RouhRHtCQlEiPq7Yr+0ds56wPvdiHsAhF3omvnZHAsQPCaFB\nN6k5CoekFhYtTeTOkU/PsKEcOX7Q1hOUPAcW5YYASfk6/r5ohTi2LhYxeGnB\n5p7f+VOeHwLG4kr3nptIZNaXyMIhZimNb389bw9Ezh0bJoVisb6xCbx+rStn\nVtmRUL3iBmPcvg8ZwoAp0N9iimFrvJw90CKtLuv1E6Z4rYwTXQ/lHLMlYmci\nA2aCjQuaUsdlMaEbWiTZNyM3iKda/Cvdc7m13rFK+LOFnhJeLm/07mvPsSHR\nr1Zr\r\n=n49S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9Nlm7ZufZuPaGOvhoqK1g2eo4sR9QttZ6J8tiK6eD0gIhAOknftkS3zLvwWYZMb2cPlcFdxAE8AZF156+oNDAZpgD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.5dd85d0c.0_1619568574080_0.3973985339103665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.cc813cff.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-ripple":"0.21.0-canary.cc813cff.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E3Ygq43ckeHr1Lu2sAm428yLFnlQLoAM0Ux/lhczRlDd6xYf76MpTzL5muNY5I5JfQzw8ZUbHxat9bg2ZO5zwg==","shasum":"34a2f4c4a2d22eefe590ad86e3e32225a64d2d9a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.cc813cff.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRaCRA9TVsSAnZWagAAi3cP/3+4e7GiTf5LrG/NuxO2\n3L5r8npjioruUeRio5o425qudQmMEjAg0jtMAxSX7qmy8n0ZtQPH6cwMgRSp\nWCWq7L4XYLMKGSRaM8oJgt0e3MdJGAaEkqS2jme4UgEG2oRTpE1KbpwSQ/Wq\nPGtRN32TKfEXB2KAz5JHIdHbsgQivRHaW6Jq337qdpg+vDPciMcszKj+X/tP\n8n1JTmooaWVhm9NbeGhVoJEFQo+R3aYkNsiu5iTZvdFsu8dkXvt4mWydJBE9\n+kqyFunMzyI9gutNGsfS/88jaJR8ls1IbPf89iZQbXDa7MxFcfg41StwJ3D2\n6Z1AzBSoaxQSRAeSTJJk2cu57W0g8LmO2vz+yVmcn8CXN55Kxdr1S/jSgr9D\nk3uMNAg0bEBks6/xaxkRVemcULuwtuabz9cAe1qk91rvJlrb7zVNIT1ALCAZ\nfga9iK8TNThiZRyEpmKVqG4Dl6W0SHve/pc1YAx0sIEvTIxM6lQ9vIT4Ojq0\nv0pH3DOUkO5sAdbLop9S3Ghv9IC/O0YCh+tOR402uadhXzEWVjRV/1Etzk9w\n2kyrfeBEe52bOL1u5TC+fnF18kKC0fXG0JQEcwhsC/J9z7+2iGoOoxgst8YR\ndnkX29EfTk5PJRUV0fb258IzTSYkIcvkjk8IcWpAwsC//xrTjohu7CBpx0MR\nww0u\r\n=dXEp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLhBeiZPtYbdqwiSTYTjR7ZZTLwT9nB7zQ3fpWDiPOCQIgREAwssdDfNmP2rx3PSKCwJQH22lf6bSi2Or/jdEzHGI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.cc813cff.0_1619817561954_0.772056390254569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-checkbox","version":"0.21.0-canary.0875e898.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-ripple":"0.21.0-canary.0875e898.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S2ounk3uUqWxh3lh5aW/4z5XJIEZK7WBfCDi+txv7XDmR/kkklqI4Vzwhlbap4/nbKTpX9zcibE2PLN9ZilDUg==","shasum":"a82bdc9f1f31c90f9adb8e768bc36a72584ab346","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0-canary.0875e898.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZFCRA9TVsSAnZWagAAJ6wQAJFxHkxVh4dewpulTmVE\nKQjvqn0Iet7kM6w27al9Is7aRr2JQZxfQ2eupXvC+6N+aFuxNI4kn+NOyYn2\nGhV4R5M47twNmLnZH9rL8ZRqG5UE+pkzNkQF9yCK/RfEJM4eSMT2Oltk2X6G\ngKI1vYM03UuOG6XL31VeG2mOJ5FFBpXH77HBeudh1wMqjU5jHhcUr8EhCSym\n+Ald5TqG1sojuASGT3XTc7jwsGhYYWZ1tWw8nE5IlM1uJQyc+TcWdqDYPm4J\nL8Lxe6SsH1K0Zd+TeN78pnCgiJSYuaSFwmzK/psmakOVt89azK/GdsSES6QE\nz6UsedbSSdY/ZveOoOYq94Mne8zc+jxb+bMGnKzeZZLED3+KLBLTc6X+kYR9\n3ANLKrVUd2zeqHywH4XBToxyx1zTbP2ItshI85OIGHawIjEPgZpRqD8TWtXq\ntlSUdsBKBUoxwgy4bHSexniof80cWpZLa86XlQPc2DTLS4EWz3nst97dEXwJ\ntIZzVRAEcOvGd7DRPz1//ExDnoZ15VuUPRVUvFIOVreyyMHwC1ze3qbW7bXz\ngrUIdqEBBMF/1PGEfG6wXx2bGoTFMgRWB4MSOCXcfdqH0RL2cqs7d800VbOb\nWNXSUwoBEIdUc8zPrcIxrw5bfEm/+39PRXptbYwN0vCVizyFstHGWzbmksu/\nL98k\r\n=InDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6aySUBwOfyWUfmFW/bCVoBL6cGJuR1edPHTivuKpN3AiBiEQWjeq52rNuIEEhG3BozOSDiOg3HGxb6yJE9pByHlA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0-canary.0875e898.0_1619818052814_0.3835216351004771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-checkbox","version":"0.21.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/mwc-ripple":"^0.21.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-V+NnRC4uISmN1/X+8Fef42gqbCbq+QTg99ig5iwU+RuPOR+OkYtMH8PHol2SN7GLVJlDV8CPbNDq08Ekv2itCA==","shasum":"9063635d10e07647c389bc28acf0f3809f310e63","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.21.0.tgz","fileCount":15,"unpackedSize":86711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmQCRA9TVsSAnZWagAAL3EQAJngYhTEJUn4TbjgFWQ9\nw5EHd8eI1hZMlRIgMV41hF7m4JhxkY93z9tu1xztLbYTI9MTLy56/L2IXdfB\nX6yKTSgY79+5WJOUXzm0zbaYeeSMaAezh3fUL/G1ZmquT7VNV0dPLQqI9HkT\nvh5cW9JHIRtVFwqTqtK2yjCbn0SnIdvzcwq1L9HCpNwL1cbx3bPb5Vv9Icp6\nKTJ5g27FBAGlS3XfKoAwVJrFtkTjzgKMrnQaOPFIzW3A1Aa2py9E29gt8B6O\nd5cNrFbsu2l0z11leeCEBez+MltRmitbaaxD9hF00eZhXo021w1baoe4dHTS\nr16Gc9651wwWzeIW9r8ZLYi+7oDAoW59ZtpjLH51C2+z2wXQuEK5GCaXe3q4\nGwylWtqiC9yT8AbwQ6nMEab8Y1dE+yaUOyVGSXK1cEjPO7RUW7fHyuDba2XZ\nQNe/oYclpQ4A2GdNtd9L5y7UDbF5HZn5CZ8g4Mfi+GVGPp2S5UvyrJfLwwCR\n9aqUsExf3testu9GQmfmlIMaEpHGDfTz6iXxNsECZ0hvfdU73uvIkH+8Z/Fr\n3VTdb9qM/w1GxzSaxIODxwVR5WBvmsrdojT1L6PqCmyes0M2IxfLM1w2p0NU\n7FvQQK8EtbfH1NvDpC3NGS3WfQZIq0Z1L/FHGVDlZLuiAHr14Jg5yqXkUZ/d\nIGjJ\r\n=oMuC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWIEeZKIf6Hwvf3IbZJtCw/WepzwFhVVihpaaL9aOZ+AiB8OSKmTZLiK9PqCDfikpAirb/VfpODU3K7RXGpC9fMbw=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.21.0_1619827087988_0.5604312869025128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-ripple":"0.22.0-canary.8f1e7e1b.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PXIqb6aoYHFjAaxOZbXpl8mnphYl7bKmBzkDoHwAO3Ds2sBZg0Sr/qP/8XXm8KVnY3imOcGNTPP4d/Ri/RBczQ==","shasum":"d036de96f42d13e93f3e841e1ed330a847bf8e99","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtBCRA9TVsSAnZWagAAQ60QAIfr8mpMPVjRVNMZoRPg\n/U2FGVXB4NQ8gx0YxWwtvnnO3FXrcX0or+r7+KzN6ipoRwQMtk7BOnzQIQCf\nQLl8eb//uH/hPNk3LloCKqp3nXUKUzie9xuTswKRux0oGyBtI1pAkwGUdEbZ\n9yF27PGvw0g7iMbfe9uzDyU6i3rYjqcrI2hvr4V9zLUSquxJVlQfL5AouWrK\ngFnn9kRpfaB25s748sbkt+CCCiM3cTjQjoV2fkzo4qgg4fomD662yqny1G18\ncZsKnFbOTk1VXb5rZXMMoJY/qbY8HqZQOH6dnofoKOxUXDI6VTLGhSXKLP6Z\nYzklgvowOQHDr+P/dTbgd/15Lzlz7j0vJPtD4ReTPUAKAax3JR2egFfQogmU\nBpwOfdIJqAsCBXeZTjSpPQ3UYmUMVdtsufYLeyEL4TEVvnBrQ6I9Z/4vFEsL\n6W3GL15TAgEpJjSJgU51h6PxnqKJ97EABe70tR1p4uctqsZVLufFf2W0Fi9L\nsPegCt5/1Vc7MVcqMwsEB7xP0GGjG0wIFozSgL2GZ0jL1xMofsvzUQcOtpNq\nMDTecINQ2EBQqYrRB5xCykcz74aWUsUQwLAnITtKpRoBLXFyu0IVZK5+xCod\n5FPK+8U29L4ZYkLFwv4v0Y+3AB+FCwoeHtTD/I7ieedUnX8ZKSTpgdaBxVZO\nqtZD\r\n=P6+b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5nkaqrFN/E8ALTd+WfzdXhNY+LrOUhAvHah8gK7c6HQIgW6u2gtNbQ62kx76TE8lRH+6auK9++ISvGhW7BQTe19U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.8f1e7e1b.0_1619827520627_0.6294675333486586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.deb0e792.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-ripple":"0.22.0-canary.deb0e792.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Rz1l5d6c2AajbKZyde0sczyuM3MY4Jy1kwSWwliUjpTVKJ7z/rrTUvt3rG2c0kKiQLz/STtHeiR9drXTsWzVCA==","shasum":"7a21b750afe02858ebfa16d5a2407049b84c6766","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.deb0e792.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxZCRA9TVsSAnZWagAAdQ8P/irLokDkCH7a2C/aqQB4\npZHNIW/veNGxtrBUVWAbQdLpwHxX+9cVGREvO3WYafxbl3jZLQhxj7wB5sJ+\nDCZFcMkg2wJp9289ccBt01x27CkzxJd3M4shLLQHnPQ1Q1Na3UcsXAK5nufw\nC7PeA7MbTdru5zSnH/9TYWneBsD42U4Gv4Sxpo+ZJFOcG3lr9nJVNRI/63EK\nAJaoQkUcQRzArRtgwnr62eXBZ8ANcMoJbq9QB/cpCcrBiiThxAxHlJi5LAza\n6AOk8p/PEWorOnQF9qBGa5QegbOLUywCAAY/FlrCm69ECUnnvK3X1bIpoxsU\n0yJctEpnKHWJhfQOn1WI0jCyS02myJg8NBmbCgYDrmj+8bJCKsUmLdEKcyZw\niw4hbjQRRMODsRIYA3RRcAJnRkOVjART6hpd7gGDWJJDwKSxZcpm0/OLYVV0\nkhQTxkfm1ioBzMRWr1pRoqCAWYxftrdPZ9Dy/TMgPYUkrDEv2MzI5VDWFThB\nQhvjDdQm8v0l917HmPrUlaHm5mjiW0aP76P4bN8d6pr7mGQK4tcbU2buz02c\nhP3k6ynVp+P6oHUKtZwyq8cnoqMrKIISNKTcxtEZCjMMSTrr8GiplRaf07oL\nstFlwvvMepYoyolBD7dkOD6PNcy0j8mE91vkRqJKfAUXIsLDpdgKVAsxnfhJ\nBUB4\r\n=y6G/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYZmPrviFB2kY01hJhCyaBrTaDuTaCOuCs+XvXFJ5hCAIhAP+PEXNhcAdsgEjZlbxc0ByEEaMpm32HIgbhukUp2sW+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.deb0e792.0_1620077656784_0.4369632399660146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.a3ff615f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-ripple":"0.22.0-canary.a3ff615f.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X/EOzPBlYgiupvdnqQIl6/5/vYhP8mAJH3kJJKO++buWP51xtlKPcSi+jTUq4pEd0XMnQgG9FFoVDKBjpzH9ew==","shasum":"df3af147e9e8439747485679f2a2a67fba0249e5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.a3ff615f.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpECRA9TVsSAnZWagAAgJoP/RMC+IjwIrm0dA2WpbBK\n6AZNvFaNqnnzHvhRGlT9+rpA6LNM/xAjvX0nysV2Wv/uXwTzFjOYJrjMPjgj\nSQgD28XXt/CftVEbNmiW5GEppavESo97pmaQIvBEAWvJqKLL4SCR17V6WFr+\niRLZ53mMqwV3iexICsMZgib4jZjXATWq44HyGhAm23mg6FfUKoR+UfmJuQEu\n8N3wlMwzreSgLtyB0+fSMQrwkrAlA1021BjQ6rrqhVah3EGwSs7MEoXbLNTs\nbIDvBpfBJu2U1rz5juG1pbFj7RgBY+xiLwfLfBP8RDXJe1wSK9mCMmR+Kb2m\nUc14QTI8S3G8h69sp/B9ksV7UM2wEdBOa8keEpRXdJiV16h01kfD1pYf+5JZ\nNV4wAFanLWXQWQVyt/NOwKNUilk0NqJqPMsm++5CR3nh8Le3EA1lnWDfPT0B\nylOEKk7ODeriFAJ8zYJJqaEkzqtGAHvNI8HjczRM2Oxp+97bgzrFdmRCGnvV\n+G36a+BJ6T2J1UT6sgbSzoAhQE5mkU6lN1F/rnpzka9LOEHqC3swg3+YUetq\nyT70cE/H8Jl9uWzmsj9DyCK9ruNfBi1GZwCflVPmLD1OcKQTnc2T9CwencBi\nKmlgn7z5k1Wej5ESWdBLewNyg+epfgy3EDgBMdgvxr+zlx+ABecP3J0CbQN2\nNsmI\r\n=Rmqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYKUEZocUEdWH2pvk1jECOXXFwZQn+gZHnJaOqsWwRdAiEApbT5b5Tm19XEjdRgfjVHfndr/s+j256lVUaFqQBqWQw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.a3ff615f.0_1620081220314_0.39176163928986285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.948ccfb5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-ripple":"0.22.0-canary.948ccfb5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y079xjwEctLpR9/vb8k5eCCNrgjwfFGzC/cQAX4GORi1AhC/1ONUumz3ImSZGZBU6ouz+9/JAyC8j+1MYuBPJA==","shasum":"caaeb3b2fea8d26fd3301b54f741468e6e7a7fe0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.948ccfb5.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEECRA9TVsSAnZWagAAy88P/ArKlKKY7BcxEtJeAMU9\ntr47Untpx1UKRnOoHjW7RvHm0/2idglN8jxLt1UySnvj0c0WpqgDlW6SdiwG\nVT+oHUN/lb7ed0v6qnBB/92coL1FvWhm2vx7DrU8JXf/HK1WAywFVl8O78qI\nsw13lInnsC7nmU84f+rG5CA2xqTjtF0Y4F1zva1Jg/dJ7ytIdpQKQ1bd39V4\n04cbgU8gh+euh9Co4awQa9fPSUl3rPrKxQCW5eFF/L30qOLapJR8Iw2zP2ZU\nGxy9uDBeJgV8PC1cpsRkU+rYicjhxha+iANJyuw1VzV/GBtntwcQ74s7ii9f\nysxrlt3ae0gor6xW35ccTlKAYpdzfPUtnlpmr4ut1LcbqctQpHEK6tOxpl49\nwwBxX9egiJ1x/4s+agM2scFsq0EddOpUlS1IaDXp3BOE2xcrIA+yNLuAV/17\ngNPUFjspCYsRr9GZjB4EL2nhtZ6FeywZoh1Bypr5N5jHdS4KSHxTktTMN8bM\nY0wl9s8yP3FYvND0INT1N0D1ujNWNNcGH/k/MTQP4BVMd2U6OO71oRLF/+F5\nAz36jIF30ljVPSlXS26zs4RgsAtIs40n5FIpvz1lwHwQGmspOgpxPNR+bfpr\n2FdyN10i+xR1zAjiwpoXlIJ2LhdXmUTvdxGL0MA02tO49vqMHmolDqonFS+4\nOIKe\r\n=Cpox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5PEarMGThgMs+laRJQdwW3cwmxNERjRa42og1dh8H6AiAyejgLiggryxf8iMTIfb7zQJR1mgED7rTOchQtLG/DkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.948ccfb5.0_1620087044057_0.04397632507024918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.9f8337d7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-ripple":"0.22.0-canary.9f8337d7.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TeODfgC2U8BSbPVcFzjU4kzclOPaGjTudMCf5yKL4qaPfK429iG1oFmPeY3H3+t1SDsH9RcIE7JRMhpB5css/w==","shasum":"f2c276cb90d4ece89ad4a59b7287eb248d8dab9e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.9f8337d7.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRNCRA9TVsSAnZWagAADHIP/iY5+elC7ovplblWBKBK\nrNSU1t1inBmesXbA7Fy3cRJgxUY1ZIajr/IeEjq+BdgjUH3fZo3VZWpf7uRi\nfJ+m6zImmmh8WGXu09nMZJ1xCcLV0jZpOAkRmvByQjSeCuRxX3yocivxMFLt\nCBFwsvRKV8sIBRmHgavHrXIdk4ZYfEpfI3fHHTb19up1gn//6Zf3knjzhHQi\n9dyXSN+jwPaFowwYERP4xvtc7MN5hVguAd7RZZ9ok32BzL0f8xvIW37153nS\n9kpysinFxO1r6R9kqQyH39K5je0LQoMz9/g4eqd5wxzw3NKtTPoMffd6XP18\nfEndKOBv6kCyJqd33iMi80ZuIvdkEueZTp10JeLABVDn+jtpnrN1e8tQ7ssR\nbH2h8kSX2HPNSohtHVYb8tsvhvUtE+XfWp23v1AYCWCN0urzZOkTvukT5/bo\nqT+tgdVXWVRtZGSmwlSbrCV2FXBkgbKFY8NxoUXopXpphkEjeUlifzQc8jyk\n6c9UnRTNMbQEQL9ubnVE2ZHG6DjaRfq9IcApUzjEt//W7FwhOEhjTuQ6wSjM\nF0nJ/T1aPwj7tmGQKp01yqo8ib8/4FOeRKP7h+ZOthFNz0ezToW+vH288L4H\ng3Bz/L07/pBnIrV0jd6g6sJzbrBFSebPWSwr2vwEjYJ19cQyqQk60XKU44xZ\nQH7/\r\n=JUpn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyzVQhHKynWiRrDV2VouZ9TxpieW6OVK/P+HxTMGn6oAiEAsR4lVX7CSy5XuUvZKxESlPAcn77gACXLBrNxIDXRrqc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.9f8337d7.0_1620153420717_0.1400106261498819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.5813480a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-ripple":"0.22.0-canary.5813480a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-riBY8cpVtXE6w7nV+S7mO1dxv5S9i3yQFBjsvrnmXRE8zv0/b1Xr2f4PuH+ekQy2HB/xOUqUPodxx15oH55q+A==","shasum":"eb9a4d1f832f7574a9333bb024750c102e12a75d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.5813480a.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMYCRA9TVsSAnZWagAAQPYP/20AZByxWMXcSwbkF8Ci\nm0Wuje7a6Q+kB4Q+z9dGs+46KNDdKnfm5/uMGxv/8k2tcptH4QJWmNEa6ykz\n9RWf3qC45HXWha0QvQjFHqWBZgufHUf3rj6zMFi/JDAcEcVqFDaNjk0fccEn\nCyx5fiaFvL71bEhHFuDl0BiQbpk7kx38PGzTfapQmJNRXE4CCYFYfO2TRGLv\nUW94N+FHv5gFT1mkDEHhfYylTN2NmVsj10Zm39r7XPoFCD+p2i6Sw4NQLJGa\nCOBPpheCWi3WqhkAbSQDrDH+h8DO4n4NjFJ0UAMHAEKk3n/+hr4ibDlUZvzt\nUgChdQqhz/rso1UlrH+OPkEYPXmoMNgwSh3TOxI6VcaxNW/AuO4q7AVJ0O6A\nPoJy1MEVZcbOp4fwXN9k3qNv41UvqugRMQoRO0GaO307b1ihbON5JIijF/R8\nDBdHMqwXwt5Li5bzj4Xnqo5X0m19Om/bdDz6dEDny2CyNTo637BV5pR69a/4\n8tlewVqUEmmoXNHNIXpeR+kmkR2NbfuxqbRb7pFKJgQ99eDJ+nYn3H3oZ/6s\nZpL9pCv3MSiPMjRAdqvPrwk9UbBEjvb7YBc+E6NKf0rmaZfjw/eG9KH05Wbc\nMcJedwh7Lj25/d9ssi6PzhsWFL4oYRYxB5rIDWBTpGoUx8SUgissVAK+ZAQp\nJyfP\r\n=+6mB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtMk9+6S3DjfzGl7KTAxu/FToAzWRDPcHf6LWzcHJz4AiAof+52UKtHafgdMODsMryQGdsQ67YnrwnZhTavrccXNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.5813480a.0_1620239128030_0.854107828201945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-ripple":"0.22.0-canary.ab7fc1bf.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fD4hKnhKpYbNSH2yW3YiPxESrla8O5ObtG8ItK5NMZLR5QEVy2fdGl8u/gn0X0BVOX9kOwVtClEe/U3xmSipkw==","shasum":"c451bd5934e2bd75277daaab48ce30a31e8caaf9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":15,"unpackedSize":86763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC50CRA9TVsSAnZWagAAJ/4P/0PcbnztAZ88hnNBVzUC\nmCr0wfwLG5Oh1WPmxAXAAYAb9KMBUqql4dZW+ySCvJBvIml36nU24K1d8nRB\ndO5cEYdP6JePbCYW1lwq1bs4oURPCqDi5o/nhyiAg1N0DiePlZuHeDtZfiVt\n4XvfZj+whIBvim/gp3zpceXY1w4YNY1fgTu50qh1ioRVVp8YHG0G3l6ScEY9\nZGcrWH4ET0LFQjmmTOPEqQuLRDl95d5TKz9n6GV5u2+RHwZzzQr5yozjcIh1\nj9oVr3Mvqi9xXWolOXFKZ+vzfSQqvO9csr7vlZ0782hNIysle2qouo10o1bF\n/IJTeSfAEy/0kquprnTH47EW4OgzgAMhnjLxxOlvau7CBjhGLgaPHATct/Cw\nNS5nrwtOOGm77ELMCmgBkatuMymnYQHM0QcKzRQjzUyVzJnUkaTmtwl0kC3d\nm4aum/CI/oNWsTnfBtIoiK1xUqwc0ecwNNe2K549Sw6XawjjK03V0Z2SjzCH\nTIVDt7f+Kr07XrLomswMhgjrgAOs40LuaA+wcyj5UEJCX5nH0f6CSqfyEVka\n0r5wj5N5E+EhDGjVw1m0xeNLh5N0+RUf7QO4Bsuf1TFa/v2YMyZfGPTFo5eG\nxYx8mB0yMPIsqti5uBoM9J7hb8PwMaeBoEg+1UepYkEFCYmvCPNTi7+XW2rK\nNEJc\r\n=lUW8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmdSZ/JDvdl3qGJG9JhzylVICXHLgKp5Yor9j+j8w1owIhAKgzSjk9WmohXaoMWUp2syCiRh/Rm8k/Ngra/V7xEuRS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.ab7fc1bf.0_1620323956372_0.43347945433467605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.25693d60.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-ripple":"0.22.0-canary.25693d60.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nX11dvJO5V2OZhT/m6gmrZScXhIRSBTxe0dJg4jjyJ39SpAmZODd+xkO5gerbajtiiYI0WEQa6KS2Mx+xYIMtQ==","shasum":"2003f050fc5ef8c9799092e1df7e9ad30109b29e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.25693d60.0.tgz","fileCount":15,"unpackedSize":86759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdyCRA9TVsSAnZWagAARTcP/1L7b/kttSeEF9kndq90\nK2Ue9Zh9846vNBMeGi4UImoib/X92jug3AMcVOfu+ZvHqwIZibq7rxxXJtte\nGUYlZcMQiCeIa3v6IsWJH1AQekPGeX6HgyWXLOOa3Oe3+Fl2jDsaPj+2gJfk\nluheNx9vQ2C5Wm3Igi/RLgUAFGCdITaes/jj986MVNIvfSTiN3m9w0pPLuQ/\n/VZFglMRyJBX0C5ryDqikjACH6ub+t0+d7R8umSXX5pntsPhYKOAohFpsLH6\nVfY5fal2hMHC7UYSXD2xWYENb2czWuDlAMaw2RMXKxCQJoz4iJgrIy+s6/R5\nVORK4XxpPQRPu3Q+6fq1q6Y84+719HyeZlBTazhqJq4jBBBbHl6l+TCQEmVk\ngbwI1WmPlgUmQbtOwZim4WiUbcYxU0xftESRSrXNNsPcYw/s0FXgydrH6maB\nIq7XhhFv2JIfgly6LVnnFpkWXvwqW23jkoiTYlnLkGpySgyKJ91FBAtwq2B4\ncfolUX2NbaK8SH7PctmAfxxdm+bfMmJBIQ+lmiUsiDHKx5xn5gDKzgPRElY0\nkB6zyeF5ljEE+JCU1r2t9bphzLoZA7n0elixc1OlDCtR+s+HVmXyI50c/1T6\nbnJ/j9pmaXEDCIGu1jMFTK3rtm0Thi8cKiFlKYbdtrAMrBgeJVehSr2K3bX/\noTsZ\r\n=zuJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKePEQvDJ2hG9GlNabKm85cXaQgTffWOf9l/njBaQxegIgSwm2d0BoEd/Mm8ZpaFvckfRac97VbmGTeW0oakqSBlU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.25693d60.0_1620424561679_0.7281892339396732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.c497962b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-ripple":"0.22.0-canary.c497962b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3Dpx2XAuSRRkPiAZFhzY++2Ge8FZWBWzaUqPE/61QEkD0qE8pB8sUF4qdaANZFmNKrUJg4jrpr14Rxh1aGr+rw==","shasum":"963a8c502d0cc64989f2bf59b83c0686cea8d5e2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.c497962b.0.tgz","fileCount":15,"unpackedSize":86759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0MCRA9TVsSAnZWagAAGLcP/38staE5LZGjCSmMZHpt\nZuVPW1gXFyj906gIdTTlBaqmf5KJjEenz1P6xfV2MsOd8zb9vONaiZCIPZOa\nFzhMSg4jOWZz8c47l96FuF1PMc7uMTmHPNPeI7DRZqoVNtwHrbd9nr5ZTAtS\nd5uUF66EN38nZ24CSfDz7dCGBkdyykmlJ4Z/k550xzj0omJ7pm+NQRmwEPFs\nN/D4O/5JShmiLvR+vC9E0s0exI9quoLlFQvLoPU58LRoFQLwm9C3r/vgMVyR\n1JWPktZO6iflnWDikmTLwv09ALb8Jv/lSez2QuUEbZi5kiOds4UNPjkX73JV\nMCabagM1ZGVdb6F8n1t9GXVVuEXSHsqaBETVXxnBQGlf+LVm8V2lmqwdzk/F\nRTeA8AJRbKF+Slk5vhiG/YUl8dbLqApmtwXfSvVyyL0quWTWmiHH1fmamqj8\nKZZK1fgUZe48exjxvbLflR23qt/zDdb7dTNqwRVS8FLHZ6ERoYtQNoCmq0zi\nk3tC3wKgDJYVUmLhFq5pWHPWQOJYcVfjgw9q5yeCsmyUIk5dkQC0AbPZTm6a\ndBrL1PtNm5yIl3a3oHT0ItOf+6FNcHlgFH1Q5JRMjX8nUQ7y6ACMpq7DlsV2\nz7LKjJMDx39bE/H2UcKkkyQAuNZA/er0La9FrTNJTAJ2xa6+M/3uxl486rVx\nD8vH\r\n=rZ6+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFocV0mJD/d90vrj+6IlumgFhDdq4dOjuYm0MkVS81/HAiEA7fMoXPrk6slSKEMAN+TplA0tBlNhao9unK97nBH+gIE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.c497962b.0_1620425995519_0.08177496347044921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.e300688e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-ripple":"0.22.0-canary.e300688e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y5UIpq02wthFDY9K7tgcH4xPtAFNcB7Zi1rNuMm5OAClnTj13kuKWmLbk2camsqR20XAoph12TF/AX2mqllaxQ==","shasum":"361c8a918b20324f5120dcbc612e894c683f592c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.e300688e.0.tgz","fileCount":15,"unpackedSize":86759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4YCRA9TVsSAnZWagAAXrUP/0ly4PFpiHF5wFcRKSos\nsSPckEpprbTySgm9O3+iduGk+M3vQOlBbOAxy9kYgp/j+9kQxlC1woj3mxkA\n5aT8ki/W1A0I1eCjtf7UMnh+6Og12Qo1X84ageKENPDfGBTlvwi6yOi5IYcQ\nkdr4Isk2iU8aTdONpNDduxt6NUHWzohikGsy5ppVxtojC4/EEniG54kl0pdT\nhDnYd2+cmDlfNbFa7JUY7TdMLEjL9u/X9fRAERl3oQ5BoTWcyoC8RY356kEB\ndxF9N4F/fJWWuTJfV5R7iKccI5SXZndx9pmGQSP/tN5uhvsWvIcxcdGLEPOa\n+UR3ppfGZJucGCdMfIOZ699/5VGb5jzNISELqshUy+CPbPzWETkwRRhyJcR5\nixIzyybBXTnaitx/kgI/nr3PjlSxaiNCCbvxl7K92HbY/L2HeWk+OOJ2UNKM\nl03CWPlZ1n/vMMFn146C1BJeyQPqliFOBgQBHGY1eHgSKMYxtKiHPHlbDodo\nGEKUHqluHJRbbXKElqjVvLFMJ2ls0iEAt5Un36j+AHO5+748A3brKo8WgRVO\nWGG6ML2iphNKFXofX1YdBoO8qalDuosU7I9mM+ywyVW+uXFNCwE+5b6wHqxQ\n9JhcaxmAzoWwQOhfTuvwXFjNRVCVS7Ex5SLz5o4W4UEdPsi98KI9wxbxyJaG\nVDpD\r\n=L6P9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBM7695QMId3Wi2eubl0yKX8RTluWlexV8qLBXLTtZV0AiBBkbYTSnERvoYeHofdJH5UgO8pMjzJ+X4TkIqH+LITsg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.e300688e.0_1620426263896_0.28316429921174735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.d70287f2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-ripple":"0.22.0-canary.d70287f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4GMP8vUT7mS+nVtXyMuQ5RhPSLurFgCCFmyNs83e95jc7EqwwyoTqVt1bAlUltPmj1xbPiLPuOyA1UwG5ptSYQ==","shasum":"2a66994e686ba34db948fa6020a7a94c128e6432","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.d70287f2.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmOCRA9TVsSAnZWagAA0kMP/AkKTfEpakU9mYF8X20T\nC1LCDl57FIq9hdaviQu+5hduMScAQxjoUcUBmphjqx0QS71H1NN7WdxYlpSk\nbjs74cDTk7Vah0MQZQunQ2+utB89zKw+c8rS+08HUZdjofU9A7muOp7TekO0\nE/F8o7rAAdmxJ/6tJTtT5b/O5M3UeamjWGDYbzolv5cn1nesJR8u405Xspsj\ndGxobPCflg2a4udFeaMSaiaoM1khwMwn7s4DicIQmIIxK2H7FhfJK/Q3rIrE\n8nWy+k3ep6cuN2ZOb6FX2TSzClJbMdqgzGwNpRT1ATeO8AvFbovUBSiEcx6v\n36CynSXzpgOsW0rcT92sY6lTwkVPwg9U7gUKucIbhYNUeAm+hVgK7BZI26CP\n+lsPVGu/fMlZiSSes9A3YrFAnQL3vlKAhv8hNXtQV3HcwZubDGpS3Qzkt6ZR\nvXk/+EMgY2+K5BSYpUjxCcHMjmDCX/FF41fw/q+mQF1EGItNwAZUnaMwi6Zn\n3tQwJKSIcy1QHvdTnwvMyPSgaTsLxo+tmGr+t7SECjDzcbwsxwKOgEC560Mk\ndiUne67Q0to+Ho4p4XBvTXXkWduB0xiw7yMRDQqILLbiZ82wJ0+/laOEU4U2\nppxWnYlXi/HsctpfYE+m+oK/UWQFLKBUaekbYMs6p0XJEpTkDlbqGaot/Xps\nQUl8\r\n=8hBe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkHLno1v9o9vqF3wENHfCVa2ueBvQojAcO0ekeYXLWrAiEA7z8dS5vnENqagr3WuNFP2Az18zny8qZ0808GYCSbe6Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.d70287f2.0_1620674957965_0.24629386625299055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.02e841b2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-ripple":"0.22.0-canary.02e841b2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-arc6oCcGHmUG6RkftWXdxB1onTg4NJPWLbGfPDm+yGVCbdD1NkJy2EzOJnZtpwQQ3TCHZNWeZPk1pb7rU8LlcA==","shasum":"4cd0cfb71397cad6fb2e87b3f48972709791e484","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.02e841b2.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjZCRA9TVsSAnZWagAAIDcQAJBtdCmzOqGecFI+FDkc\nXay6dODx/fg81j+16uA4cHVN9jK10aSKV9SfXUF1kLyYGYrNoljSPfTwpQn9\n23loBVyRi7D1QltSyjsx7l9QdhzFXjfHk+AvfXhZK0OH9FZo0tcmTcmjSmTA\nYRCmYhOpfHRW+DsJkCxbYe/XEhEyNkIgG9sYnomfIrD56ojsOwuYyyD1DXmc\n8Y/IE3rtqs560X+fZANovOBZqcWBj7SN1B0MzckWE6l82iBcUXEAi+K9x5vN\nk+cJBsAaGkgtG6T9QC6+QS2hjnHE9iN/jJ4dYxivcz2qnLkFWeIxozQ+5wa9\nmrMaF4SbAy8i4iWSvQJm305zkvHPEe4RF2EqfkDCpjNJSlOPWL4ZqFexoSjR\n2poADLOjqQqGpCY/EcBqhaGVXj5H/IS3pNod8iAEmYD2M7vv3zSGfIxUkaWT\ng8ktDi7plM0u1PEcAXICODbT3pV4mb5kEPjRoEhfQhd2UtJqMrDKOD955tu/\nfKnUKGTUxpRZ1EOCYWdbHhLYhSgZ4A/HM5HI/znTJ+liaITk0vHuhsmfKJL0\ngX6R1bBk0GoU57NUDCTSMW9EoNjoC8ahad3dToFe4gKOg3FiIi0osoo03E5o\ntFjhZBPU7WH5ENjxMOWevrBXR79eXRF8vst49zlk6PVjQ5Y2UB3GGxENNNx1\nJfNg\r\n=lKU/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNAs22MY2XUcABUl+o4I0zqxJwe+4YUF3RLqlTWkjhlAiEAyvVwQgdWzC2ZXVKjaVJ3/cAbdH5q0L8VSewRiyuHGpc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.02e841b2.0_1620678872974_0.5667669946038658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.badda2f0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-ripple":"0.22.0-canary.badda2f0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wRcbDu01edifwjyp8YcSTWRkBRvvvCrh54VrdKV3z+t6U69jCB7Ti+eTWAN4oK4HU2DKqv+HWJf9xhElzQ5NCA==","shasum":"990cd5f35684197425c1e6d0c7248a732f9f1167","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.badda2f0.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEgCRA9TVsSAnZWagAAAI0QAKDPI5mMDALptyy05BOx\nmg8E52J81+OmBMY95kjg7GxMeQ5DtyqErqjEEgDT2Zaqx95B4a7TQ4n+EDJ0\nqu79uD+s0Cr4C8E5QN3VZuI1Sx+sXXZusW2NmZ6HzZ8YsY/eYBHc5b5b2dSm\nUMAs2eH1T2/cGFghEpXzfZ36RVfUCotlyifwvN6L/DlT5MyzkH9wyR0Gk7GN\n1f5yJyYCJi+KaDwRuTX1ZjmmuxSutf9OibPTR7zrgLi1Hr0gtxIoQtHpF7FJ\nH578ZnQR898NMx7kszQ4PmH+GvTF4m+iL1vxvkgkCg8K1PTe3YcVcuOa01z7\nndmZ+Ny1RSc3w8Bss2Ve65tmpSvWKxHulf4RSgpzd215jVghXu7wxBRsYcQ/\nTGJTST6dIXEYFLn0YdpUikK9F9gkvm5LdmjxGh8QjWM5BUU7jRtc9ow9HIfa\naorE29Ttro1uBYywZzHnEB3mYw4ExJ6l6LX57AxJwanQkruRAeDVyuFFa++Q\nUpzbeEKudlq2dgfAkE5hJ2GVdGTpMgwe3Df8NXtiSfxlk2MX749LKKXQGn8a\nazn+uZKJONwJoe4GDEHX8vOg2FYYO2QUuJZp4GG2nGQFg8pq3IZGldSJmAUR\nJPX2JkEqw9tRFiAUTBGWmx6xHlhglnhO/MzV8Kd8KcnL//p+3Pqpw/akA/Vr\njaeK\r\n=H0K3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDReT3I7dYE6C96YonoMnsuDOTe0Aj0tb5uP2dJTeCgzgIgQIQm+hHBQ/knvPshflngf0AQS9vGLKvFEqI3kRGYASg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.badda2f0.0_1620693279733_0.2712431788894514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.004aca62.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-ripple":"0.22.0-canary.004aca62.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EyWaoAt6gaIBBQ4Xew+czLaDeqDqV0U3tdPRmIeVI8Yh/YNVPCXJQ9sgG3rpHADfbFQMtdAfe5NHAoKyJrsR6w==","shasum":"6f936947d321d5e493b9588f9bd456b1ab4d08e9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.004aca62.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseeCRA9TVsSAnZWagAAPWQP/30Ll/7lQi4pM98mue7W\nbC5g4/xh8YvQCgmpMZy5W/2HS5ORuLxD+wKLko6gk0e0DWy1w+w8Wt83QtHI\n6kODTxPrJn9JF32XzyUJMcBw1aL7LxN70O1vCt2scTLHrABiA4tV73wP8hTj\n24pI6dNL5sCajR/r9nCB2fcw6e4ypLdAlAH4BGwaTVQC7yIZzBGrq3kX6S5a\niBdkR3ZsCTn15nCnv0AZK1d9vZ96ZQHk65cOUZi0DLvHl0xBEkAzA5iyQtCN\nvmDbmJ4cQFyae5mtEZZJ1DMj/dFQx0BGn7UlNDLLy/bulT7/p1njp30lAfMv\nlg7a3SDa9w7iqCzdT/SfzAW/zBPDoauBbTsYlLjGsaMPVb4UQgOUUXOeppzH\nfledNyLRLS/6Ol6lT57A1oAViXCgR+2J0gp71eoElPHAoQJ1naszj4EKJWTg\n4BhqwQUqUG0efbfuM/z2btfcDKiyCiDk4yB4s/4u/ldtz3aRSji7aTokj0sy\n1VPfoZe46wMhM0cXKuRHNI7J/sIKMZANxgC9kJ+uxVtWY3vsWaoClkTxmpGn\n/enaINivFaaD2Nqq0Xqz2kii4D7qMmc7TURrDQnSHSchbYcjU+gV+Um1YS7B\ntjYgu/pOq59m42TdZCCqY8zXNdh6Y4bULTOEs1BAvNWCY/MyTBlesy9rB0QA\nFoQ0\r\n=XYEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMqediknC39lrZQuGAcEW9WGIJ+aevlyQwzMEcn57CsAiAwOq0fvmacgZm4MBC2PC4Q2d/M0T6sOCG4XtGIdkELKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.004aca62.0_1620756381740_0.7218218382045145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.4af17446.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-ripple":"0.22.0-canary.4af17446.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JLQNd4wcUlDa2APcWe50FToIB+mXf7DUy76g8FNq1sAWS13lXwLGozbpjbNtBdnsfUVPULfnOgTLwWzAYRSjhg==","shasum":"e786f59b396097bccf43b017a1fa973201639019","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.4af17446.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDzCRA9TVsSAnZWagAALUYQAJUhd5mgTMd/115p4fFp\nrzlCBCNCcyuXeSxVTDilsKZH9zRRqeeNvnaDZgxiJf/CsPHK6crskGqFtLqT\nU7MeREvAuVLTNG/4skGppMM3jHTCAMO3AczQ7msaikaApsWjq1Ox1vHJbXNU\ncb/gGVu9OVnCt6go8co2XsChR4GNCy7V35/KDmBpwPw6YNhsYs3X7vQtYcQs\nl07unoCN0HYyXy+9pVfrl1Pd8Dxb1/UsVOqFa98tbg4437On7cFFUsSkcjdQ\niSmeYkanH7frTPMGvgqlZsvJtKzxGqkWmktbiGfGrjbZpKOkEj5haUHxvW6a\nTxcuRrWOumpjIB77a2q0leUjJXW3LyZFSe6N0x3ZKkxf5wlFblay7UqF0b6M\n8NthToNyOCEHCx8xlFtht8Ugc1gv9OA0ZPexVU+Qzop72Wh2vC8yOwbqI3SS\nv4Rn4sN4WCQA3h4hFA7G69D5cZRbqh6xkHjBZ6idJGh+LLaevceli/J4CCrv\nubQQT3qs4suogN5umE3ZeOo1004d8U55am8coHpPZMponaNfLu+gY4oNf4D1\nBC6BMxRbhZ9hACX9UVPtDdyzRle/q7XdyTeNPL6vxPX44wrcphadu7GT3aCP\ngswg2jVp6zQsvkolMFNsIPC5Y7LMIPeVpdBT9cxSlh3NOLqmpTeQ7/evXZ0w\nJ+tE\r\n=wQQr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7jcLUOIN+oBkEq8uzFcb0Sh0rgKRKeMJY7HM95BsmIAiANpWX13Dg2eg24wE4cy7RgYo02UHtb8crYlgDOl+nH+Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.4af17446.0_1620758770536_0.6061972918800087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b94d7187.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-ripple":"0.22.0-canary.b94d7187.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OkBd8PoBfHkM1R36Nf5JCra/3P1w/D/d4NN/t155gwVY8APUJBLS8AJmrg+nr3RbO2ZmrrOpan2Nl6K5AqXKPg==","shasum":"2723d69bbf261a9d559546faa3497fea7ba67c7d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b94d7187.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtI+CRA9TVsSAnZWagAADQcQAKKWGYtFhT2mFDFJx5fM\nXTplFEZhoGQ/eOPqTmSxtX9M3U4RXlzS9PWRwUPStc4ijoZQQTVWw7W8tLVx\nj/2m4ERJihT2iFZQs4oGLoBi7GdpAskwlP/tGIqGmbzbGX3Fwf3YNPYesF+1\nNn9JGd5br6xYeyNv5uqLQzHMilWBqsU59ybKnQXnBO7bd6Pu1hKVmIQaEhbW\nc9P4xAhmNfwmFOhRLudWvOOGeXcKL3Q/HrimgZtqVO01+nwyu4jY3cR0TMlm\nqDMlLIyV1wyUahWrK7OJ8LGRBFF4IMyEqqR0mtSVAqEZNrA+ELBFd/x7Brti\nuofU4qS0NW9K1z4CcDUoIulhxDu/nStIV/q7JG1Lx7VB1k9fj+EJ8+HcasEJ\nh/rKiTei5DWSRaTp/L1Lj6qsCdfZhCeGCoE6oNtyhyxJ0XyUoeeTJG8Ai4D7\ncicKEXRMxo3G3fARw38+yLw9QgcdBQHpEZKS1qfsS+UG6DQ/y6xJK4TlSRLH\nkTF2E9rDVmvP7tTHM9wcamgKozHjPw4fg/cvMAeRXfNqk9yNf4iTz/o8L5H9\nHA6knUnqDcawmRKU/gHQy/6tytVfO0E/oVwooOX6jpwyDTBdtP+3N+OSrviC\nw3djPsf31wdwUPC5p6985Bya8xBRRqoXfceZou5e8VCiWT9YFPezBBi4zWNl\ncTlk\r\n=iIZR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFMdW9C0ewKSIoi44oLmsyNhAmsWykH31Y0/VWpeBk9wIgZhPLdhG+gKCtg0xB61QawOqUEnTEDdSX8IXLunucQPA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b94d7187.0_1620759102387_0.06695649462151465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.4021b2f9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-ripple":"0.22.0-canary.4021b2f9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PgOt8VoLPfZbB29rwZ3hlBxhOWTvuTUvfKDNR8phJ61WxcnMdAxrsVacof+Cj+PvoOL4nKUjzdDTAWgyBtpTeQ==","shasum":"89e33e34166b391b76e99f5a067c9563cf009894","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.4021b2f9.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAACRA9TVsSAnZWagAA9ikP/R6i4a1Doegg3nw0+J4A\nbORnJDE+yXxa6N4xo0S5jbfgdFlqSpWjAQJDoKob7cqscG55QMwOJSgShGYU\nA218RGQGYxF3ubCYvxPJNHjaAY0ZHxJxfN+Y0Fqtx0k/WwWgpeHXqvbbODl5\nUzLBDgEr5ykh/KWIbMsM1R3zTuEsAwK/SaqdC8R8rWmeJlRk8Ac15dYsS1Gt\nHmxfdUBhAstN6PQQnoKoUh3+dGF/cgZELa+P3N8H2EIZ7OfiKWV+xE7j88YB\ndyzeWJP1j4DIqBUMcHpggYs+AkYti5C9hGfunfvjRCXffozCILMpGjpgM0v3\nyjBl/Iev5vUFgcM6no9ndJ5fZ88jAKGQo3bsUjvWab5vZZ7D8ZySYe9aewnp\n5oCQ0ujaO87xdALPMccWb3k9ooONbcaR248/CtKxjzqC4XdxBI+M00PdKpJz\nxkIACXan6HM6gpJ5KQBWuny8Hoxi2DLwvlyDQiq3oBFsJDv/IBCN1EHlbsNe\nbb+1Fh+TeA9wt5hJbVD+qBmQzwoCzzpEsqhoxLxNwhSnWO0/ovdyC6aODJ9i\nfvQEuiLhsovzzPwItcdHGb3x7i/zuj0uh2ROybqPsQ/0e3zkE5yuHCT6djmb\nzg6U+bEItT7NJ1LQZ8TWdd1KSzDQAG+729Si7TE4286A2UZLO84se05cEAcw\nTfJf\r\n=gKuc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8rlQ0dL5U3fr7jsV55WICp+TzJrmAZAz0J9K8cffgQAiEA0q4vyb+hPEMdR08YRJrUHGdVOR/UzIVhzVjzwdISAIo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.4021b2f9.0_1620856832011_0.9804464809591478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.6a5956a3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-ripple":"0.22.0-canary.6a5956a3.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VY9CzVrYxc+R4ePz7Ib8boYV3n80G3eppCkPH9mEKaVRBddkCThPm+/LKQMzOGfZX4hb0bE/8wAI0gpl00c2tA==","shasum":"dc05a6ced80381b51a6149785ff9300058c50a13","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.6a5956a3.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFP3CRA9TVsSAnZWagAA3EEP/3VDAasPADpxwRFyQabn\nrwV3CSSZ/0qtSbUg6VDMX97fJqDFWWUyrj2gtVeJsgOIeFoGYyroTN9IFsal\nt8JNosXyCX72bZi6rpc52Y9OaSB9de2ti90hMY7hmkbWztme75ui8YokNcZG\nXVbbqJBwzShJd1AoyBH1tFmTmQFkN6K+c4W0UBY+0b4XtMxxuFqXmTyGM/AZ\nvsxypWwZbetmr4oy6qz4C7fM8E7s76C+kmTQcyXTcqPtwOh3Ljc69Aw56JHi\n+TTUEEi7kNwz0ZEnHCienmSHXRrdTCHvMsv1fIfcp82tBX9z9RgPBEdjzAeE\nTKG6TczHEWFQefdsJag5KwQsC1VvplF+g5YO6cxjJjjI8+Pf+BbZahKzYxFF\nQuGWkosVPputfKITiaOGhPH3gVGUpJc4APSDqQO2ZlT0E5ZFGE8DwVRP9xQ3\nTVNTGLaPVNgeaDmZQQsdY1dpDR9Jq+OK6K7fP1Xo1mBzy0+6CliB9BXyqxZt\nt+pQiAmmbPF7XeRW7MliA609Aae5m2eUZbVCYFcrI3wFAcl+/5tIqn3BB4Nt\niZ9VNxF+K9OOJ3mh9YyVCqfyXgO99L2CDy5+02VbTEyJaQwzOoq9uVQV9cQx\ntfjeKNWkAd3QtTnauNPlQI/ACxCW2re5M0pIcuZAcql9ozhmukm0b4U8dPN4\nWV0c\r\n=67R+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEsdul/fphV0/KDttKh6HM9PK8MNKfsiVa1wi42HtIntAiAJkTrPgVtQ37xbL/npBtfiOV1V9tVYC6We5Pcqr+9TOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.6a5956a3.0_1620857846667_0.5415735554869634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-ripple":"0.22.0-canary.b6e8a74b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NIqZ+eK3Jo5X32NoLY1HSkA/BkiLRy1UtaqP+bslaMH9DjsAgKcTm+B7PUKGnHgJj9A3rFDSzFgJ1gjjZGshDQ==","shasum":"ddab702bc7d57b947ab50acd8eeb1e6ddc144a2d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b6e8a74b.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF6/CRA9TVsSAnZWagAA9U8P/iH32PFvWEepFMjvQtCA\nMzc6qjl3vWQtSL/4jMnpGCLKd7PPKRE1zc13P6X5nhdGeE+cXmD1f9pCVlv4\nIpwtIsWtDlvnoib24EP5yC0MLlVsE9FK0ypaSGVr5WIXM3PtEsutJ+wHAWxU\nfPUTsTaV9lL10f5PEhHxpgS28N4PXmkVgq14/Yp7E75AKgzfXG2//+NHncMu\nonLlxPsKHtMnD060RFlTTjl0RDeh4QJA5UG8NSiN3KSB/XaVIAYntfef2hg8\nEFOtXh+8O+UkETp/bIch0ROD/T8u6mRiJ74YjhEqNAfYPKWG1GXIUNg1QSbd\nnfZlxsTH/3ihohqvCJ2HnE5u9MTrSLiYPeevbhbMTVgs1Ae62iXcPMuB8Gf4\nNaVoOH36vWko1kEaxxm5TCZivB8a+gBeXwXA5gohr6H3Wn+28wVu2qg34I/C\ncwyR4Zxfd9enHocFXHu0FR8tKz7f+qvUOPJI30w8hrcEMUXEBltQAbVoA8FU\nJxCkgVKzNOdhJby/iSjrMnR7GQO8/rJf0Epzhz6HEkewTmcqPM60DEppkiyM\nfjqKXz9xRen/jXHdl5Xmvnfli4ABe9+YKatgN6cMwmraXPPErrl19TuMn5In\nsguwPTm/utLT97SFRQQJ8x8P46MSwsh4LIubU5AFD2T2DLZ7z2ZDyPgIJ5/i\neeoa\r\n=YMJU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEWc3XhWaIya2FT9CFZA2ENffVcyayAJdjTZocHXvBmQIhAK6sqYtOR/H4g5PHodC1RPVYmzE0aIASzLqtvdm8GxZl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b6e8a74b.0_1620860607240_0.013405787628361754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.c94e1030.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-ripple":"0.22.0-canary.c94e1030.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-F4c4kTEfFuHXFwJHCrGi+JkO/uXrP3tqWlRQYd0t8oiy30J7DQUGnswdzytj3uG15+M35ghKdv7mKS4U3PqtGA==","shasum":"c4220ec808b7017dd48e58d5c13942ff7c770d2b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.c94e1030.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAcCRA9TVsSAnZWagAAnRwP/RoLO3vzHzE0sjjeXTkM\n28wWhv//N5Y416ENHu5DGA+jesb9DfQjPkAAJvFyRf5O+z21NgsKWpKwEAwZ\n8O5c2jE01ysUskcLCoUWGt6jUG6SrVQ1D0KEZJluoFfOaaOPtQwd1erzeN9y\nXjSZzhDs8zZrIpSWfdUpjQ2xj2YyIlEsUjRDCQdgYWZCP4lHAQizsFpA3PCJ\naGl67B8OjAcjxElIAxFWSGB8HqM7rRHe8SDKDNQe7/iD9D0MdsmpYjrckHmz\ndaLK/QqzBe5wR5HI0MF03GCGvfl5twErV7jiSDW68iEdo51zLBrdd+3U7pEg\nmFcE4tGaV33LVNNZDZGt/SQPDXOn4924ZzFJpS36+9mJ+DoHsxGZPcP+Ohl4\nALS2afJNPBZb2fEbDBMyMu0qiy55bO2+XAGKHg/EC9NTv/Xx2sCT4XoU8LuM\ntg5Ti/KCeOw+ahAJ1d6fkWupEDHGORhBlRLtG/zsAIRk1vulxCiuJDhMWG74\nkYvyXOVPGtTFac8tkO4jInLvsiZULAq2D0G2ZhYwYGDfB94BxQ0OlfmiCUi2\n8MMQBU5zXyTUsbOHrLX9MwkbwiabenRe4twXlSENfDHjAd9+muTqdl6w0TW1\nHQh7+94TTQORl2VKl7QIMTQsxQ+ppy8fVwrzSEw6BLaJZgb6uTl9jK6dh6lw\nav0I\r\n=VqPN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjC47N4942XryvqV5Cf+sdGMXQ67rBSsl2XIfdthNHxAiBBqBorAbXhRCQQrKzBUTvOpREWn2TuiMHxQWDDC9ioPg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.c94e1030.0_1620860956431_0.2660275395151619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.40a34e35.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-ripple":"0.22.0-canary.40a34e35.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NIGVRMFcPUFfmHzaKb/WXAxqqs28HRLH9rcCqfqeMHx8jbQpuwhnjs5+QXH64MIqMhQeToPAWy+MuFoEbhDOxA==","shasum":"845ff2424adeefbc89e1906f524ebc6aae52784c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.40a34e35.0.tgz","fileCount":15,"unpackedSize":86659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuiCRA9TVsSAnZWagAAiMsP/R+pt0aV46edE26vHCkj\nBsxKU8PgUtpS/6CrWaNu7pdQJpneZ1jnNVMQOedBO3uvkaDS/4LYPcGvqSEF\nffgAuntY2Br7yPMuI3afipxjkeXwmZaNQx4ehOoRby+aVq/BBHYc90Rsy8qY\niR/VDgV2KGeSKpm4RjDzfbJB5Q70Rl5EDRDCP33DcGtyvsHchZAuRMAT9XHD\nnzjfka4LP9upqJUp6kq99Ny8sHNizDbYZ89zNLD0JZyEq487L0oC4vmini0K\n1w3eLkwjQa3bplgBsW2BqPFAWGtDquOZd60SgbN+vr5QfmBw+YgrAfCBS9ya\njpHHXNFW1R0Rp5gjMLBGHAOjqbFgI0nyIqaG3wkEPudAnOqpzjU6o2d7y944\nUsYvUHLFCCUpRGfQ2O2gUextJWxanScLDA3zeLpxC+it2btAzP3ReqJy+hEt\nlp9XvNPShsHhSFLeSZt5ycFYe2BbLjGiSNr0mqRSiVXmYSG0Cm6hVBAjFRkP\n1xOlJaJ/4wiAKrezJDBWId3IbSCV4o6JsPNLaR6gs7OMpQ58urez8FL0gvt2\nufKOGBZEqtSNAofolgNw0XD3cQLY7U3kKr4DSzx9GRVWt5NNSKS8w9t/hRSC\nhUaTIDCUm/LMAoTtCt+zqLWEQ69PuuzRyuX/v5wg0D6tHLv8SwLYqK4Y19iS\nyioV\r\n=vlR4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUz/XVGWlNDMa6hl5/Y0KbH6pNPKrmSGzkQhc8lSPJEAiBm2h3x1wZkoozKZVMdfY3MX38EE3NQH68qN2DyGN/TAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.40a34e35.0_1620863906087_0.2736095577227504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.1be14d2c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-ripple":"0.22.0-canary.1be14d2c.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0","@material/touch-target":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zf+Ni5/3VT16tHA3o/Sy6pKwcmIDAAUZQ4LbhTikmB0vVjIk4g8zURuCKxlxC/5M8t5/qouQWDEjihWamZ2I1Q==","shasum":"c7d161e2b261b60bcfb624d22254510eb3e4b974","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.1be14d2c.0.tgz","fileCount":15,"unpackedSize":86967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbCCRA9TVsSAnZWagAA39wP/3VHab5dVv5jRBBJ/Zbc\nd58kw6vjNwx4LqA2/TnJQIPvxm1+8EfFEYiuKBKkEri8O2rQD39t0YLPexVB\nodOmvjxjtcHR9yn4gpBmzFKzJJDMcnMR55hHCJpfgtiKd/Lq8J7trMifdIm/\nZMgivbohl/mRiRgGmsSlJ3rgBAKOZ1dboU0+zRUy2wp/jit9J0nbUOptHa67\njk0sDReiknkIXSBg+YpqDOOWpEiUClMLLbk8Thrdm6/pKgFE5yLqmtRsSRsF\nSxWIBtKGVOlnnzTl3h9jJfs9hyOLetn1wuJjhOrTftKLk/QZDYmXShG9n7W+\nUa+9mHVvN9f4OgyjuP60JO1+F4qns/WBWLj0GEULOBXYW92t+8Qr8tdks4nU\nJb7eG0a3mcAA33q/RUIdYaNf+vFtLYIldCB9RSXY/K8Icf9LDTR0DWH1XNnC\n0mPb2pr+nCCW0X6N5X2i7M94PccT4gwFfm/uO9P97+8dLlBgaOUUIVrbtVRA\nQA27BCxnWW8GlUqZQUg6S606B7xoqvfXgNwiVulcrzawhwlpMU588Fj55OOj\nkAxa1rwvK7Fq0S9VspQGs/eLSQMhkMMmNyUU2rVl+BQu2wJRSQYXcyLn0BwQ\nhBUVG5uu7frIAHkiAanCn06QC9X8qvM3yJmnaGVmIsv4Ca9jhHKqjflQPqp/\nFoQx\r\n=okj0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLm3WTtdFn7PuoRPVcCo/EK/AjsvAA/W1+Lk6kfVMjkAiBX6qr2MuPTDQRdSdHtGIZaqCMVvYcdHCwymBhF4yHfGA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.1be14d2c.0_1620928194057_0.8011877044296039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.87dbd64f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-ripple":"0.22.0-canary.87dbd64f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/touch-target":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Osd6iTT+ACCqyK4JsZmPNtaJ9Wv/6ijkEUeviYldgIR3nbzcm64HBeSx4kO4XMAqQ6g0CfywPCNya8Bm9oC/zw==","shasum":"95cb80dad1d884f3fbfb60d9171056900a29a431","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.87dbd64f.0.tgz","fileCount":15,"unpackedSize":86967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuR4CRA9TVsSAnZWagAAg3QP/iqwmSbWOawu0IA7/C7J\nIZlCjhGgwBItFhSxM9ov8EKuHHcnVVX5W3nDy/0cy4f3Wo4EqhZkWgngAZ+q\nbWYyzkl1q98/pqmgIkrYNBfUfADw/FGCweUrMQVN10bMJB9SGplYHmVRI+4j\nXwr0h18jaf6ZkBk4ju1Hs430OmVwPbs/7z0CKLZ+N8qX8DIOhdTqq+QVwZtT\nzDZSq2cNTnSfgj2Qd4xFcyBfJ2rmjpaRtDOTiQ/yGJGAjAyPuKFCVJpWDVQL\nX1IYotcwpniR3BrvMO7S2sR+XcOogRuFZYNTpUvreLh1nIxYxXghfI+6pWS4\nm9gK/tVT7CDmKlZgMcBAXfvq3mOdRuiHefhS7b8FEq4KTbvZac8Bsh2BkOZk\n62oobStJH+GE4G24PrIWfy8DkYz6bAXjNMTYI6O5jhCrHdw3ahjLjtAzL7Nm\nsv51cXQ7eBugfLLNztWN1l3ABNPa2brswhj3n0laW+rd1q4rjbY+l9Ry9Ry4\nrm6gac2imPNwZw8FmggujmZC0574pPGXKPuVAsEqbb4G/t8k7qTP4IaqCaB+\nsX4Y3Flohc9e+1ZInUUJDYufHlwI6kjIEZ5SE4qu+IQgD29F5vwp/toH/lLy\nZ22eZqjmzo4h8q0WY08zTu+9x0if/zwpjwIz842bDNQVqhubHQsqFyO7nsJ7\ntUl7\r\n=2BFe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8q2aXNCzzUPp+ry9QVwGwvSO/E8lTqwnJrf5ES3yP7wIhAMtOPtWxS+hH+9MmW5WwJ3x6ZXSM1NR3+6uPHK22y2VK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.87dbd64f.0_1621025911539_0.7682988662343224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.c452e4da.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-ripple":"0.22.0-canary.c452e4da.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/touch-target":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-M5DITOyx17tjC2rnE7qxTHKG3Lonq7DodPe1z7W78zBL9QGads3UVZ1+aNhB4T4SKSI3ELaMI2KU5py+RPMHnQ==","shasum":"a054e69c47d4706f4d85af079c23164564c912d6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.c452e4da.0.tgz","fileCount":18,"unpackedSize":118462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovz2CRA9TVsSAnZWagAAM/QP+wVfyXd8lJhae+2CsJil\nNIw/C+r1GnAeGzsqNTB4QOku3iBhIhwpHJZB/cKmuE+/JZzzcvp6Cll51oP3\nv+N3Etcpmb6LBJTVWj91+is/glvGp4G4zbei3oDVvGs6+OBnrzf1VJcElcMZ\nFpUHl1XTg4J6VJ+YmOU++SrCMvnNdA14kczNNIz5h0LWIQLXrvgR5D9ZwlbN\nY/WBDiXgq93o35JhYCnuExENUbfYR4zrAxeEkUJVIYbHE+NEbbCJb22Sra8T\nfSr5aC9zIiGDDv4Jq4054CQalzpiRdJHeSUHbOfpQk0p3Ce+xOnfZvYyU90t\nc3I7xAv5B/ujZIBz8QxxupyKya6sSmCgDbxKK9rEVJfPk0ZbJE/00eJx4w/L\n6g2GOGwqyzy5QHZEyy8BLu2+1fGoF2wqc/l050K4K1yyCsCQolmVYllYXbi9\nH5gWma04g9i6thHbjZKFYlA2yMe7LluzgwODa3KDENuQYiw0W+ZuoZUfs1lh\n9mB265cP8sDUGhN7Wp+3UWXFVuQ4TlNyaWvkTuHb7X4fc4CJm9h7xvRUynUa\nW+RS31geGD7JY50mPkud6xRAo2O2eTQsLYCw1LE4nv3HzvUMGuHxBAXEKS96\nlZ+jh3xLGST7xlbmlGD6xYj3Wc2/iiIamYQPgHxMIVh9xrMY3ZYl7lQ7EHtx\nYjwG\r\n=cs/c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYq7ft2tXWWEFMk0e+nXqeamDOj+ocMdRtHD/9aaN2HQIhAKqcnQ4i7Iau9/eSKT24oysm4SB8N8MWAdq4eFN2nzRc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.c452e4da.0_1621294326400_0.4804897184056156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.2212691a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-ripple":"0.22.0-canary.2212691a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/touch-target":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wdlmQbgthpONyeCDz2DSkCugJhv6zD1MdjWiHtW9SgV94NMzQ5s/otcEyJh06m3SW3uS2ThPgDvgETsKa+ApGg==","shasum":"8978064969b292043b1fdab5dfa370f6a4c606c9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.2212691a.0.tgz","fileCount":18,"unpackedSize":114903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHKCRA9TVsSAnZWagAAnOoP/R76YDPUKfg1an4rbnq4\ngY4eWpSgtJuu/Vhrt3HE3jpPMhiQzH4ZnbQA9wAcLDW9lnPrNbatMLREfSAc\nJVI+uDeGMvBNm9vKXYn4L3UOMFN8eOAQBTmHa0cDgXx3JhsatEvunny039Fj\n7VeH/5jf0aQNRssUgdE5N27IHduS9NRlHTcFXVdHMX5UBNyDJVUnG6G2Htd/\nlh1zNJ224XFGj/OXBfifLEHZaxoLRFOr10x/WfOJzmt6rMjoOKHxOZcO3hFJ\n4pokQLUfq34j6z28WToKu8PaSddRwj6XKLF9H1Zg5xVWPDYgY3PQX5yLGCAt\nOW9dV1LehXvhwKUAPtOv4oIO2SRkuqkCalaAd+PDX/BjB5Kb/MxXAoagIEUF\n2WneBsYdvySpHbLXkiGHErpaPIRb+vpd016qJAejsj+7R4NTEF8hiFIVdert\nnz3XvDzC/FTPwoqW4YKwCt3NfdlbwDOcJB52kMmjodKGBHuzj2a68dPKqmfX\nKgA6itAIdybARhgmOex78G1dgNeHfHqc2Qr2bYh1fqD7hZLwluSTOZMZVmw0\nfVwqcm1seqOhhvZOP32BspfO1OWmvBBTElGOxSaje8bbrmz7qOWbsgbEEdp8\ncqrkIiMJ0oZ0YagJcYb8ncSrdjwddzGUKSa8nQk9tlwOqkdHgOkYCV9+pgvF\n21cS\r\n=dh6C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr3el2jiBhxD6Tsx/HevsENokDLR7Fxs+zF+8TJk6V4AIhAN31icPm15jAQzmIie2hPe1fb0R/SR+QYHXW43x6V4r4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.2212691a.0_1621295562536_0.27689130065612955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.f748ff2f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/touch-target":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HS4NMkQ2eGy9rxeLXINRDqDl/lvtvikIB67Sovuzag+qkuMPFcLPMAUngqy1YyWIy9+rDZp/r/wFBQcKbDVIkg==","shasum":"aecf57b292b823e1b5bde9d1a2c1d1d46c222bab","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.f748ff2f.0.tgz","fileCount":18,"unpackedSize":114907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjLCRA9TVsSAnZWagAAc8YP/1HBCCbSsG/H0R6eIxMG\nRULr8MrOdBVA6cCR9tMus9TZy7m/fsbhPMdIxSgdP5rnHU8zjekt0fA6Hzu2\nHhUZWeaqpy7sKKGPQRETlPGc1LWtvs1U9gwmNblKPhFY1eCKagGmmsxqM03Q\nc9/Dq8TuDoq8kIx703Q72BU0GM727pDRbuG+Ls3TEgXXHasARHvWPuKjO+zV\nAIDRzmnnsB/bq2pp1dVvWnPODSCU3BVdZrh3S1J7j6KRU7xbuHNeFAGdo2AW\nSzdNh31LCUxNM73o5/Bpw1D8OlQRKA+jiKLvrZ34JzZnpRf788eS4SndRvR7\n0AghtHd19p/GHPcpg8SX2pwlfaEgyf/pa2rnwsnxgiJdKoFPrHVhQIcUD7RG\nUJhW9X0Dd72Aq/JFQFuV2Laujz+soLoPLXx5kjWHy6wV+6Mv+GLEhP5JUSiu\nD1vLYQHjnuvRZKzfxFROXvxIVwcq6v98kPSA9dty6fTAKhGz1zOG+e3xy30X\nScgcN9DUmAAYn90uwTD7RIHKaCqrFdzj8hSvC//t/eMus04GD9o/hJvXqsps\nL0r0Dx2SSePFk07CDFMU9S14nXZYWEf3Zl2sO+cyWXVo27dlAAQrjbcYa0Gm\n75FZdufZzDaSr4UBmj7d8GXwkFDAvrl5oIh9ZIVO7VeIPG85mR1QLv+JZZaU\nmL65\r\n=Lk+4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7hQQSwagAtb1TTW45SnS4RnX6zFzLEW/hvc9ljhmw9QIhANhhQjXYufaYem8EjYy3pimaX+zFFJC9MIrVqDc5dgd0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.f748ff2f.0_1621297354702_0.06728453851173799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.cc04657a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-ripple":"0.22.0-canary.cc04657a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0","@material/touch-target":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-m/BSKMecOmZ8xG2g7P0bHZ5mlMBNkXxcmw68FOv3qZZufEkLMEic07zxbHNePcmDhjildwMWzTLfWHgCdTQ0hQ==","shasum":"ebfd10c06120de3fbdcf05751757ca621ce9035c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.cc04657a.0.tgz","fileCount":15,"unpackedSize":82488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZ5CRA9TVsSAnZWagAAWYIP/RIYG0+/eykQ7l311jlq\nykWwdGkx9IOUw11ea/fs4NsGh9v+w1Fwj+KUDG9OYHLnTQFx+AxxOWzy746P\nrt5B2lpryfih3fH/XJJmHpIcsMJV9sPExn37CDwCx57gkfM1uTyohYmY8SZ/\nIqFezY3jjCIUekp2LsMIwLTtiQq2c2bwKWpGUzlOJLF43vMhef3HEV01nZ1h\nmX5VNZlCtvE3p7x12v4/wa7F+VomkOAM500AZTQYCCqVe5eGnNck+ltpzqQx\nBsBbja5ru6AvlhPeE7728s9emmn7BbDeIyyFykMiE7VF08dqmfOYQcEuaG6K\neux3oFtxwz5G9iR+CqJe1ep9hLRUi9E8BkoCW8AU98Kb2ziatmFj1XatO8Db\nZuHbOEiKY1MuAU2Euwl/fiPI3mKCP+08ia0j3Sz4izKiAxjVcpBz9G6wAm1w\nxCEKhbzI9wNF/nVVGMz4+09Yj6GVvtGSidGBPE/sVxUJ/11aYfDAR2xfhG6v\nOX2p7JZgyGeFfxW4R6Fvkydz0NvOAxuRSqUYksTrxAZGoDKVz9qBs5kdyly2\njjAOPn0MaLsl5WEqUbbn8KH2hFFROLtOGrZ9x77e53WK5cNuLnTCZN6OaF1u\n4vaDIbS+zY09kQtOtmqSzAUjb7RYwgo41uj0u/wJX8sY2qaooC4G2pD+Db2J\nC/ka\r\n=lDRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHg09/5pLxHBz/2n107Nr1nf/jJ/hF1b+E0sfFbgsix0AiEAuVRfkbl0h5O/rPAT30plShTKUe6MBEXbtv+yu4w4uQs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.cc04657a.0_1621300857332_0.37717744383412155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.3a3114fa.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YsLs0X180u3k5/O42jed65UjV5y0s3l+IbWfhomzAS/CPTaAQQk6o5zT3hVG1KWdwedaLK9uL4XCx1RfNu2Qag==","shasum":"1e4dc3d648c78aa3b5d8dc88c2140cce55f940cf","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.3a3114fa.0.tgz","fileCount":15,"unpackedSize":82488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHhCRA9TVsSAnZWagAAoeQQAJJAwhc/kcYCUtDaLIoJ\nUEhbG5G2qXq2VSwfUeaAu7qRbjqzJtWD2OtX3sdx3xRkFSi9ltxqZ8cBXFXi\npi+WNGMlihhwoPRqJhkEgRX5c0Mg82415/PgHnlHM2t5S72aPawVGXLvyvCR\nN9GnaRoTW8JtgVF2d/ZhEuHUjnWkzL3kbCqDG+ZIDQTh6yHbgWA4NqG8A7ep\n34XlU8ITQjEAdL/ylx34x/C9K3vA74bM94Mqk9WaYhCpo85bLaYjEZAbuTJv\nVfmc5WqKgioSibtx9HAV3fLmsW58T1GQ+CS+X6Ornd9aIPHKWQoyD+0D4ohO\numqMUNVhDREw0+qJTkbGgL4Dr6IGcN3/FG7b9TFRkmIOjyvMGmkc71Gv5U1W\nuZ+n3haa879eds5aGSy+VyInOzLYtaqCx+yAqOXGcrDn+i9csLOjlDc4AP0R\nCfR1e9URgjnTY5kf9F8QtDN1gAQZxsRPFS62wkx3sgLVsOPqq8qYo3SpeB9j\nm60+ZyYOo+DDfOsKUtOFCKTOhbH7I9+5gLDJgjh96PqkWRYqK1dNg18wvUuC\ntVv3chW1DWyoJtDHfzQAt0TnqKU9YZrESWtTTLjXXRNSP3He4Z0Y/ZJ6iEsK\nXyy6oiIAcPosV4ygOCpQFCXADtIk/9mWPCp6qhQ8YV2tQ5tIXA1purb0gfea\n3a1s\r\n=QHZ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvc5L7n3n6jst5tKlQ26s7bmkzSI3XI8/R2voDMCpYEwIhAIfRM3kx2VgTKSYU7ZcjsJmDbBOIQmBoAyuliFx2CSYx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.3a3114fa.0_1621467617265_0.47119418898136534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b46bdf83.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NzZwyAsQ00MFnpjC/LCwtUCROdZc1RbqQr9/jfvXBKLxfIILOoVEVdQ3uF+8fqMezZ+GYbid8jug61l/JYXZUQ==","shasum":"5f8275c0b4517af259a30e471b78cccb9cfce360","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b46bdf83.0.tgz","fileCount":15,"unpackedSize":82488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCJCRA9TVsSAnZWagAAr9kP/1xheMAYnDODvDasXmbs\nSxrCcJrJSRgDH2I8yfVBHyeHFU7ETxXOcxlQ+trsjPs9eRgtBQh1BFu1sLE/\nkbY3nKYpnxcIldvOwdSBz8XmkwiG8CSxm8axM1MvdwqJgQX/xYN+b+qkw0tg\nYG60xieS/8g53lDg9q9axC0W9pgBUnSfYQyVGndC+5ijSZN5vFLq7pVbGxZA\nBE2VVbJsc72VrQVFG/ypD/GCPjWk6T+fjlvW/fe3UJG8B3ftzD0EnzBofD50\nhcBKVRuc9s7gf3+N2A4PiHjvpvDqrBZ4ok3F6V9hiPtXVhBymZzkQrkadZYZ\nI5vei97jpi0InBCFAiYC8ETWtUPnWXjTqBeXT7cF1yqZnNOrj4Ccvn9NmbRK\nLh9Kp1oK0/O0EW+NOlHlQh0uOrxeQrsYf/i/WAl4smz3jNRKpmq1rTEP5Wne\nbkDq7VBLwUBj1z3NQth4f8Yf63BGgaDBshsVAqoKbkLDU342spAWaTmni/Q2\nZPJGAn+uCCiZrlnNU3IuCBD74tusl3RVFubCGszJzCXkbxRAIoE3vTmCT+41\n9+HHa2nbRHFaSL0drCgOElS2PNdXtHPQ48w+9IgDaAWfWPLfaO4dDwLz8KoF\nsxi1pqscNk0WayjCNPGEgsqnTr5gjQcVDrghVirH1pyuF3DZGBz70ZNA7pCG\n39nV\r\n=p0Rn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBhDMq8nCmiIwC14oLOOQAOvu7THNkspYzfhAdIO92LAiAX7hsZvPkCisjUZ/loIoaPJcIS+WBY15z6DXw9qe4ZmQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b46bdf83.0_1621475465241_0.4396307680518039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b401a081.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-ripple":"0.22.0-canary.b401a081.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y1c2Q6kBimB/7uxMQcMN5x9It8jeC93HlabZEgpqTD9LxOH77eL5oA/MjBQYS3wvQ2fHFVjTNFL2o7Qp+DkAsQ==","shasum":"08a6af251a7ecf986c8098d966ce839cc7061c8a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b401a081.0.tgz","fileCount":15,"unpackedSize":82488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDYCRA9TVsSAnZWagAA7JAP/0WrB61nWFDC7jujEuP7\nwoKZPUytGE7jJaHELgpj2fWjdvzQvzRUEYTzi7M80N54uktmXTj8uT5pNITj\nQb7CgzRbtSKQVe6nKa7V9wW7W4SQE90CC9sWQfveC+0S2KEn4AAvcmeh7dK+\nZXKBYd8Ka16GkKbKWfN8lJCAgO/O4N4zmSY0Zfq/5oQWBr/hOsww+oO9DpPk\nTeSeA7it2KrDtpbiBgRPOkVi8KFNPWcCK8npzliHMoeMSev/8zfr7e7UJSnL\ntFDnt6CSzYuIllWaXf6rbQBMZSz6p+oXav56cMNVBRoLhTM3KsaxM7GsEJfy\n86FbRVUIZGo/EwAFuE7LGRdaXu65E55sx1PEUu1d9LoMyez+F821SyinurOO\nS1rV8zuO43tvjA1qRvfAjwuLNY+T0jTSv8meXuIrgPYFLQ0eDhfOTEZhzkgx\nulwofnhjWwimHEKCWJz4L8+t8Zwu7qIU2+w3DRZ9k6eTGplBYu4hefn3aRz1\ndLaluXbFQveNvdqqRh0CPpoyj4u2TRcODrG2pswFmaUi3gEodJKT18BOrO2N\nEnzdaslIX7NKvEpdqspV2zMi4HtRPqWnv88JfWwO8sFeSLU9uehEsJMpLFlv\n5paFfYZlCOALDfEqvqvyOUCf1AXCAM3eUMI31ZPHFcfsgM4//XVboBhhqgWL\nS5c0\r\n=1ADg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrqGPooGIeWCSsAh8AIsmSJ3k3ioR/GwYDASC435q3DAIhAL9cz0vjRTtQOdtGmbC9PCHEOB4bgmnuyMFqnXwAOmsS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b401a081.0_1621639384347_0.5709290910045666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.012c8dc0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/pAGfyHP0NCyNxCoXms4rD5hUIi/X6dNg/zngHmHVmjkLqtD2/NuPH1a+JS/kYeTJ013sJ0XkrfwZj6IaGMrBg==","shasum":"d9e568764c9f3371f87b866f6dc86a1f2b5d61ca","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.012c8dc0.0.tgz","fileCount":15,"unpackedSize":82488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1eCRA9TVsSAnZWagAApvYP/0ZbGtqBuU9/bGzNL86F\nbAIWRDWqj9AloVBEzSv5bRGhFgJGH4Suf4hVDipS+RzIflLHlKjyOg+2aC0J\ntsCQdTBqdBx2f7xvKjUQMmq2iVw61oee8gw3/cZnM+Zyq61tyoq7ASQslcw2\nd0o477FZ0A4jGrtmqlK5vic8/e4NfFA5g4EBVRP3YhmSjfUaI4eJomvw7cCr\nz/F3DS8MAU0eETDO1tGZZZ0tKHzoWZveM+KbSWI3k4Ke/KTYX4McYOQVknkF\nHznZs89LYANSRMYg25qwcfgA6N7XBX29BG/u1oAH5B38gfm42klVP+KFaCF6\ngvsiKdWdRcTJbbOg1yXlPprhTaV9KB/lw1zy8+lNE8C9JTqH1KbVbFwvqqL8\nErDELptyDVthVxMOExCBy3guMf6ETrRgH5mx1SFNtfw4XHg3yNo7WdmRlH3o\nRRucWZTSb39g+jEGVeU5RFhXCzJzaRyPSm+R+jVxv12DrAdn9i0EOPq/QBqv\nSZvIky7cCkoxIUWpZLGt8eUqiw7JAPUUuVR2HuPPxQVgdzLpM0LGvPcqE6cU\nwNX3qtllThXpjl7JRpCZH44TI7rxFN9EOOZ4bomB9bVv6LhaF5TV7xPgR0eY\n75rtoYUQ/4Gi00A1g5iAHGCdvCSIjaSk3ZTg2qxX47xNCJw18wdf6eoq5vIy\nw+Sb\r\n=H2+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBib8IsyF4TfAJNBlnhKhXpgsJH2L7i3BZFiiAMIoPGfAiB8z2VIsXe2SI3muKFqHHwT+DS5fZ4mm2iDYfs/2DvlrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.012c8dc0.0_1621642590542_0.3129330078699839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.e01a1731.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-ripple":"0.22.0-canary.e01a1731.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rVg7ZLC3KLlD7nhO2YeaRUR/wW3iztKTNXXXPYENUz2jC6IBq6vCAYBwQ/exrFSqOsKWN1h+UNM47LC8pdDmOg==","shasum":"60e15187bad95f50d5b47eea64c9c5f273ccce4b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.e01a1731.0.tgz","fileCount":15,"unpackedSize":82496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84sCRA9TVsSAnZWagAAMXAP/j0azk/0bXqE1oCKkPQD\nXb2KbUWGHU/rabbEUc3meed8DwCxZnu54s6tOJcpPLgwe9FUbbq0GHg8QDDb\nJg5OQWNGp0iDyJ6MJgBdYCwMHP4/To0k5X0xSFqniqMXcdo8XlDxDUN0yekH\nGFeby+Dfj6b5KMeuZnw0G8gQ58MEcJnXMvcf1B/nW78qYv8xkZZr2oEfXSG9\nyyVynPMgC/GC+jLOOwPhOMvX9+f6NRZ3fwfispXAirCQ7/JrR0RY8nFLLi69\nGa9HFFbmiJLrtpDsT5af1zzY3gtoKRVguNtTexwyxiCpbdKSi71M1kUZK4eb\ntrVJc5Ra2bSGpNLbc32LOaYSOIA/jv8KDJJSVyuMRxI+WahO5GhhKB1gazND\n0GFI8dx/acE99sSCWilIX9ugnGZ9om+GiiAcYIqKtfY9caeFfJmSm84DoFLJ\nOs3pQAMOqetD8zvN2QRPjIHInbT5Q9MlW8jpwsH6vejk1w+loRNBCGE/FnNz\ny9dgTfkpx+jSpgnwAXrEi63BO2/wvcYKRaGxcZVzUBwULT9U9/dS2EpzvWjn\nAMqa4f2gb3pkxVCA70wpVp4YeQb0ZYCMUYBQLu9+o2OIjNLcaQx32fo4GhLf\n2DmJdV1XJyHKEWPIvOZG0l0aqDJu2kB0pGr2VilqpQOQkfhH4Cz4BDY9VnWI\nlvVg\r\n=7Iku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOycYztdy08qieu6SAEPcSXPvOOuAA1QVDaKWtyE3mtAiEAudKtjTAIXi2ILL0EmNJ+lBLDx8+8ir4eHuZa4guVO+s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.e01a1731.0_1621872171876_0.6652328270278505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.59174b9f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-ripple":"0.22.0-canary.59174b9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yIodT9VOlQNxMV7uGy3bs/lLo8zITXLe5xnLdQKKr1tqAg4UscaBz120gu8bwp0Z8O7E289djhQS0XAUGXzjkQ==","shasum":"9b472fbd047cd364b279d3f19074d9e4ec1cd39c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.59174b9f.0.tgz","fileCount":15,"unpackedSize":82496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTusCRA9TVsSAnZWagAAqZgP/A7yk5sAM2MLyVzr3pRR\nQ3Z9gj/ZikVFTcGDRy/kdOAP/l8ybIWBXhK+VuZ1EbeWbb+eM3xvmLjqU9vw\nKsjsFc+sgIOCyjf80FDdvf95DrbWT4nRUR+Q6ItqXkMF1VIpGwHHoglANpvg\nUC/DEUpe3Ki8DaXnegczOWw98ykEjJlBpTqPeHTCk4GX9bTcTKGJ962AlGIr\n7k75Wv1slBC9cHc+Iu/LZWNNCYxjbzFJuJO6o97GND4OPlBvGR8HGEFvfweq\ngoeJkLBy7MnzeQ00g+tRLv87JfjEBkWUEDjL/2vsqGQ9lP2JoYBnetEGobP/\nB5pV9Vk0cs3AeXmZKSKHEa4CWo/Uy6lCfN624eaS+QREIDdwx/dKTA2ovfks\nZ6bQBufYIOKZm/H4Uq+aTG4331Y77trUhklHO+l6pGf92zNs8F3urUWBj1V+\nqgzsEbzZWpxF3wBrZuQfiOtnjaBz2SVKSFeToxYo3cv35gw5+QJSleVaWh5F\nTsJCFiLN7yl7R9HYg5OhO+IzcvjACFkBKzT0drN9tIt2kJHwQWmuNzrQfJnG\n23rGYGON+HJvPxCf0TGtPdaz/4B9Xuzw7Ne41Mje/I+r1QQUD0C7HC05EvRf\nbV1y74fGGn3dPIxTPFSYHwJitFuaxfnZNdZW6JWIRodPmVlqXPDG6ncAKVTS\ng93O\r\n=IEkW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWtNT3BfTEmvF2yzXQSWR7fGROwcccdR0PqkMkvvBrbQIhAKtVDBk+f+YwW8dVQyekmUJNb+UGmOs6CwkPS9LTkw6N"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.59174b9f.0_1621965739922_0.9703362282577996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-d3qEnFVmNoWPfCvtAB0pvsc8/XTHeyhqV2L+5OjSBuXsg97V/XAgHfByHi2S95OIrit4g7p7GyrVCNrXGd8o3A==","shasum":"5b13bbec8dadcf650fcac07634ed38ed878269ed","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.c96cb2e0.0.tgz","fileCount":15,"unpackedSize":82496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwZCRA9TVsSAnZWagAAz/gQAJpAhP+fE+sRbzmMeBfT\n16LmwYgD6BuSDx+OyA8N6w27ac/D6H1Mgy5/5L6X7y0vYN5ueNywXuyCNoU2\nPhcerp4N7uIJuq/m4N73cjqCbPLigQp13+NPoCh8vc85cJOffD+XHbybGRxj\nmvruEor8JQkWhaxAo86x1jTqAGCngwY2WuIcpxFXV4zzex70OH2bu8CUkzjU\n9KqKD0k82OHL1cPfk11LDK1oICjlgAnkodL7y08jeSySTYbQx8YK/RSyymnw\nPJwtJSiVo3iouEMFIwIOFGhRYkXodYm8ChwdCYHzfVMqQEnTjV8BfdqT4kys\nGGwfMi2SHnOBF/HlN1ew3p6h1HuI6/zlPzRd4b3j4HQOVIAHowBkM8k1Sgv+\naYTxM1YzlS9JcBwiA+ZiUm87fC+12OJNuNrh++9ZrJ6i1VZo1ESCAu5FrE7r\nmt5mxQ6MH00NVXPXKxgRQV9+tzKxNa4DntE0Upt3XFIzhXZSiaF2VNTYt8uO\n6QghokqmvazmAb0+c9sCig4Jbk1ecPji+nuj5TA0/35wgvsN94cXn+2IxKoZ\nfONs8Pm5c2k+JSkjYUr0lDjEyUcdJgTu959St98+Z0KeSAyEUoSO8dYXNn9T\nzmsUOFMAxnXc9Bg6teh4q0qbELJBCF8iuJk634PoSmmVXSkW5SNqe76y+5Dz\nF4o1\r\n=elrh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOAxAMxuNX7csxy5f/3rFfUrAuSXKn3F9bQUxc84CdHAiA0of7hbo6EQIfFGmdoZNWuJbdxZBHSsWvZjqLfSTRq4g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.c96cb2e0.0_1621969945074_0.1385591371807835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b9b0e330.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qOJngbL1YJQKwAMJog/EzcleCbc7cCluh+hLH0aWA4362nF0hBwzyLxPehNhAfUp3wXljyH3iMCxdHnDqMNXqw==","shasum":"3e2d3f6e120d54668ecbd892e63704cfb02ed1fe","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b9b0e330.0.tgz","fileCount":15,"unpackedSize":82492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVtCRA9TVsSAnZWagAAFgQP/i76k0IV9zFH2+MO3gl3\nxY4LPS8eqb6pTRbjvr0+msH1migqQGH4+e6a8jNR6sGA80/KXm7JL+DwJ7sy\nkn7EqaBXPOl0JtQTTxO2iRbpoNKeXCQbmZQOcrZcyRJ+79wcfwzThyiTv2CU\nxxfEmkiFd1KFoSAaMB83UFL8c9aBXQDUjHUbhu5uWx2c9svaqAh9nY+yhNoL\neg6eASfoyOtXgFqsD8/VLiZp5+GiRxZLgmG8qfXACXyOqVgvif21N/2odLWV\nb4inJoZQvMAIHBwuHFsq+cHNaMRsjy+TwF5HJBA0wWHbwvWQh1MMgot+aMM8\ndeBK0Mz5A/eRfFyWskUsuMB5UczYYuI0LLUa8YD15U62FG6zpqtGvbr/g96F\nG1n/uMp3Q6v1xV8ClwKyVY636U5jgsACjA585Djo1nf/cM+YxfzFQlhxkZl5\nGP6JDkT8+CfoimJtNqxaQoRU/crBQD0XJnhOdsD7CNGDyQNpBr2Ct67rFlB1\npsUtDjqbT3pmvbAsAFnJiSY/8P1dyRMNpl1H+814JG0Qme77WbvxKqyRuP7R\nvxomTAdhID2O2CotGPaehyVu+eGGxvYAGSYimCjYZQI+dXz8ZfOFtSCpRFbL\nTlRjGA4+GBC6OyIdrFiT6+Idy/2o6M+J0JN3npX7ngMGiMkLeBAhb7cSIWnO\nF53i\r\n=aND5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFftfA1jALgYsdD7iyjO+QW7W2EQ27KrKXtF5Gx4un9LAiEA0eb2qXrCDUsuPxifXsIkwLjOL8Kq4TcP0LKEhkinptk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b9b0e330.0_1621976429178_0.15365422304114373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.ea2a8063.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0","@material/touch-target":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VcKhdawc0ZHULZK6QzzwT17dMcg+OP9uT/HIE4AyRUVkqCA/7QBqQzlhnqBA2gNpMJT7bnz6WB1XeWnTQWvd7w==","shasum":"e54758febe431fb875b5463d8e5263fa7388ba2a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.ea2a8063.0.tgz","fileCount":15,"unpackedSize":82508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWabCRA9TVsSAnZWagAAaY0QAITKrRyyR4ZP41/qA6nX\nO0WcstC+mDe4gvYJ97B8ire+lvZBJiNPqnX8djAd9xjiFS1RFa6nrOLyulEx\nXzpfWIkCUvoG2fh1/36kyay5xgsvvUMCb703k4go6HLz5BinmjgbdQvjMFrO\nz1A2YQRJTJLA3dEu6C5d224haay7/kAj/VioipPYu9jOyDxKwA/2vxb1JrdU\nPsI06A7djsRSvq+yDRYcQujH29jjYkJHSnjtnyvKc/GHMGR61gNXXqEujf7p\nvDyVoTd0mZJecy/RZHNpH1VBV2LaeqfClRZG+vb+wdKmWK2Od0J7mlUX6ejn\nW+zrdIxaw0WNfla/pOXjhWEeE0a/oNGYbKsJjPhBgSH57y7QhXuaCmngL1Wi\nOGTdTkn7iQ70srDhontLUj0XRGoinqvqGLiB/HSSx4L6E3xH1Qf3EHFOfBgm\nIJ+xtJnBp+OYjObGLWSkA9/pCGvXJRlmMub1P0mTbHp2895jItL1Cwr6pfMw\nr0lp3BDYJaD1Kbo83MTsC0D2JKbhKfcynrv/rEZ+Cfvu2Do+ABKlzbhdjy+N\nJIi/4rkuY9F31ti/CP+haonQ2pvHKY794qtcSjrzCbzOXJK0U+Pn0HQ+EdyS\n99xvUEhgCEbRVnyQ+RdSYzyI5vfPuMa205FngAQwMMwAza6bAPYDl/MffXTE\nkNkj\r\n=b60O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxkkvEKPsb4kT9QKnFH822kzjidJRBV55rSBLtU+dlRgIhALxbryI3I6cXRvFUnO9xnkUvQFSDyKaQ5NhTF5JhrEMw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.ea2a8063.0_1621976730824_0.06817809335319724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.60cd9178.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-ripple":"0.22.0-canary.60cd9178.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0","@material/touch-target":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BVPLGL9MHCibpjNqmoxYbxJYeZxeHyewaRQQx04+YlLoh8ZoDuECaEBuPGDMGf6BXLam9u74qndu9BjsJK45mg==","shasum":"1297de416a7c68030eda091d60d7db0334147438","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.60cd9178.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTBCRA9TVsSAnZWagAANgAP/1gYBrLQkef/GOGBxD02\nmO1RCOj0eD7mXvY2Aj+Xd7BAai9ZRoGrTI2uCN3nTeMOxU0GGGsPM+Ch+17m\nFIYcqhATjIWxkYH+djOwlvWUYT1/rWMD6kl8r3+fY7vVuQDeoiTtIcOHmrWg\ntNKmzC6D5piw99DNy+l0x1H66+laTvH5VSGms1vpfo6Tcibgzl58jUTM9T6z\n0zWytkjpJf2qNL9MJQUN6WBL6ORipzPTSIV4qpin/rC1FzwF3UbymjKZH89w\n5cIf+JcinyAglGlrPGFbg6CGoEXCXVUAIHISMLRhIMq18+yx8QJeCSlqLqyA\nrDSj2FLPbipDGki+9mTE1A28JYyVMWkBy5uni8MXVQaVE735OOMe/7wchjpW\nG8jYLpEwnI+1GD7jfVRyKSbYou5wS/UwwiLefDbUxrwe/JkUidi/GmVlg7kN\nTgYsOXKtDHp+q3r6ey0wbA8IDDKneg5HJILjOMOPcSpluE6WT/78ihh07Hit\n0rabfOFb7jEJ3rud6VAlPqIckZGGli2wWhJpnKdlZvTSoQn/IKoBwIS30AKW\nlb+Gl5lsqn1YHbolQvWjWtkrGj7nri6kCpHlXJRHOECjhZU7zik62MweXhHC\neenYOxg5aSHDu3aPmKVNCO/P0j1o7C26FZ4ijysvOjkr8zVHZaiF66RHe6qA\noLs8\r\n=8Ldv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMPvtNlREq4ay1avb2OAjfP4I9R4nc5Mzm00oUDnDf4gIgJXjJ/JAzVZH3vEqp2yQ8sSK4KE2zOpOHxDf2rDW/W7s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.60cd9178.0_1621984448488_0.14264432675048422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0","@material/touch-target":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VxLOGUqSsNCbtQI4GVzHFLeGehxKmNZtjKmG7lONnggAa7XpwWakPJ9L2u0x8ciBmf9VOkz/hKr8NSiTo6XuHg==","shasum":"73dccb878e3a55408a0b1136f2b66138223920a5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.2e2c75f2.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIjCRA9TVsSAnZWagAAgb8P/0xgErXf9/wWrLQbwZjP\nlemISvwTOVbZMV+l0O6nFcXOS/TAK0gFCQ6TI3WEq/jbUyaX031SxG7ZFKFd\nCDc/v5fWT+CTSvpJFJeelP07+komVTm5501llg7ej6Ms8qx+ijcV1adb5rp4\ncW+KZYb8McsSrRU9eG1ee5nC0Vao5QpZKrgwIfJIY8VzmlCaZtZbHdB0v/9T\nHlYCO4wk/fUJ8WrmWvLcVXTfatUhVm1bU5Yt40HgEBXBsjSlMzs0EG7veotg\n9lUmR4+MRT8odbJ6BrnNFHHCjsVUFLGa+kg4OY+ccRT++9xlrPlf9H7yIV91\nLXOKZDnn0V4024aakZe3qgZ4k1lSUyOmKZcK4UqWSzVnm75vYzOd5KmYKGIR\n09CrYVprEjUu2H9C0dx3d77zvV6o9wZhTvP7GFNCdr4n/WzDLJjvBF7uA/Nx\nohPPXGID3SJiCPfzC+1EllXFq78F5KRmBmGD3Dln0lUbCcnEmi3IJ6lxRs7H\nn8b58pIW8tUb882+yBkMxlC1flJo7o/X4GaQSsmVpjoFQPCuRrUMYlP3tujH\npGKpFhjws7tODGb+ZeQuxiljACx4wmwyrWNeOXf4jtWD/mXSVQrXEnywsQU1\nR2uA5x1Cl4FyUm/J1niaVyINJFlpuTw+2d/Y+iR9a3OItCdyiemPEd6HG+3R\nFkkX\r\n=ku/f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCISQz8MlHQHcc/naX6REs7N4b53sWCiagRlSjh/XU28wIgRLaAA5kD5X5o/T4MupjW1UaiqeGYUT7cuDZUHBFVpq8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.2e2c75f2.0_1621987875501_0.8607339732473385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b99c77d5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","@material/touch-target":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BhjlAVGnx/VlmhFUkXGQ9hc1+ytT4pSeviHBleKge0f74DN9oG0LuLcaDtJSDpv5yqSylsAyR84Bg8WRa/zEmw==","shasum":"7dcd049a3a260beb921f05fa2db342a74a1a3777","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b99c77d5.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3SCRA9TVsSAnZWagAAZu0P/RirU7jO2v+aAtEFMl20\n86ivkhJalwNaHoA9E0/43DUaEEf+in+LtCUVYHDm/+GQNnQBaukBftlEUKd1\nhn+rgEk4REzB9TyF29ycpQavyemdrl/JUgkolr/VUVzqQhT7wTB6Kcl29JNf\nNU8vwoDpVCGhMOfNFWU9UbUcKUcYvVlJciQ8XNeVVmWZFkN0k9bwU4q/Y3xC\nJ3EEvEL16mRmXU/1rY3hOBYv4lo4lHD+KWZvRHc4ZJBZ1YJXaw4KNREhl/Hb\nX3/z+p/Fu0bq4UTPXpHoRwKyGEcWi4oz0/kNwJ816GX88GHJbndJz1sXjQdT\n5erzrsmNBgLVDH7fuhn2SG7m5gg0GmVWgx2ucmeXebXtgOhBy1rH/lkC3jH+\nVGE9IzZ8mLcbHXMTef8qF1IkI56pnzBaB9NHyLx1eK0dK8vYOomEzsrtEOMb\n3mVajz9z2HnVnUk+LzCc1Ae1xNIbVNtWLiYzZJ8LO5y+7RngvQymd4Kh91Gc\n3oiWXs3LnpDzV54b1Zvc8h+Q4QHs04b8vZDsujpiA2KUE56HWJHwQ8K0fgiM\nhtTsCHOYBw02dj7F2xLeKzsjgc0RaOz27txklokKwB6S+y/1G+ZDyLfWF7ls\nUAw0y8jDqfHdpsbDOEcq6NyhVnRjQrBL8pZ7Y4TVQQSIU/dnjrsXbgwLyNtb\nbD8H\r\n=clmM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdIUnAKvrSjlwf9DhXygyrJX+HiR1NX1dIlVDBgZk7wAiB3e4ElDhv0Ms3zxY40f9MFhetvSVvfiVZks+x/iiJUfg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b99c77d5.0_1622056401561_0.030704136607075938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.0de82c12.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-ripple":"0.22.0-canary.0de82c12.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","@material/touch-target":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pp6OhL7dNZRuO2IxGXCDVKdC1x8AMU7bcKJz3NzdJHnYyHvuqG34C2oYpT40JDYEnTwKtNiHb5q1l2r4RoJrjg==","shasum":"45f479cfeeccc61edee3308c438d5960f0dd1a26","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.0de82c12.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4gCRA9TVsSAnZWagAAvVYP/A/MeCTuo96IAOcVqsNG\n8vCKAODWg3+IbaDnnsgpojosDSWKVKP/+j1Fcd+4JvCepila161+Kgsfydib\nl7yPWeK1cjZkBTBqPy/SV8N2fqv52IsZYyAyNUTyyRsJzhJCmcL3izvesSiq\nZPVLXmQL2wAZvLLIhtcCa6vf3zPIw9ZhBf8Megd8wljPwaUY2uEGX2U6rk5X\n/u4/wCN13vZnmCVw9hAjtpGM9syiTBSAfl9JCrkvNuXrrTb1ReBn/yY7IW8m\n7Ncr2Rt6lKt0nG0mmJSkmLuFVt6EDLRGSkvna8bIWz/Md9qjkgfUIHZ/UeNN\nerIR3rfEwIy/ECLcI8tZs+o62/xJ3NL3bc/Vhpt6ipCfVEcR5ZTXuDnq7eZa\nmxpBZx17/dyMiQAuu1yGYyMiO0ieVZMHtdVhzwYhfqQ44J4jTy9C1TDnwvix\nds3ZcmLDTAHbixEeWKwUBHKKaQKmmKnVs6RjFBgwjlTYGP5GD1+eXe2WurEY\ndLKNc7THEjAq0uT/phblLPfVH2FrRZ/xQWBEfV+J8i0jh5X0dNPOKdtovByI\nvOvNWVbSv8IVZyg1UXuuzwLY675JFnONAl+xvUaAeekW6xjVtLPLAu8dAj66\nT/BZx4xn3DiFuliqejrEOvDZ6XP8c8+upsLJLQz8Ycuu6m0XSSeKu8m+PY5C\nkMZK\r\n=vuaW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0cyNXJZC/8yqVSCMuAZQ/GEAC6AX6f6Rr9YKV/Z6WrwIhANF7wm+YrcdOCLS8U8D489puo5zPmqkzxZRVdrvbbK/M"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.0de82c12.0_1622064672320_0.20828220679115295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.227a4614.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-ripple":"0.22.0-canary.227a4614.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0","@material/touch-target":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8AtZrKA35QRSDp9HJXTmEmRWhqK4OorNqP4P49RIAZBUoxuJQiLLYio3H3v1/dRjoVU7rs2DQDcYOduHy5aV4g==","shasum":"3d5445e3b0de8697a9dba3eb1a67bd783bf8db62","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.227a4614.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LHCRA9TVsSAnZWagAAnd8P/iQlJy7877Sdv6tjgBFC\nvaZ+cQ1AOUz72TT5pjklwrhu+M4EmqvyFdsTmxt++hYxz1cE6/MNaAiaYEoT\nL568I0KM9+s24IcBW/BqrDDtXmqvkFAn8WX16ujCikLPZCaAjJnxuJ5I8ais\nNS9kuSW+3+m+9hON6su+bwCw8WQw7xiAICsi08Atjlhb+V6TmT3iVCWivpxy\nb6xSqVVbeJ17MqU6cADSw9LjtBG/a92+Nb4tJeZKn9rIlcdSmA8I0hXuxhXu\nuGK93cevAVMn6VwyJlk2v3fckeqFxlHEMBKgwx4Z1ALr8wq8dMKtZaQTTXfZ\nniZyZ6yLYrmjhmx7wKxMHLzSBYmtEtkWlI0fZOsuc2RFaLEX2VRQpymM1ojA\nIk4a/gE2QZpNAtfcLNq5AEjWuKY6t/+J5RA67Kgt6oM2JTumU8H3f1mNsnTj\nTxNMEFwbpUFzK3mAS/qUPSylqlrVHjqI52aEc6bZw4iX2abCvQaADljFCZEv\nMq+SNyAnwiSxqY+5CHmIywJzujbADEFftS1oRkUw4ucT/7knw0b/ecc1KcA3\n25q93bRAprTLLOpabEsYevFVGr3l8GUhKh8Sls341ma5a6rD/KXdN45tsmzo\n+Ah5/G+bdcmcV9bJSYeJI71Dh83755nc2fI21nipG3PeQJHNgupC3SfRcIGr\ncmuu\r\n=YSsR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDriHYQoCig/5TRJYC8HwYdrhZCCDzSqPGr+8QdnmK2UAiA/iRLd275kIISrD1zKSyYVuTKYJfl51jYXPXD8z9m0xw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.227a4614.0_1622131398779_0.780270566693972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b3d21d31.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0","@material/touch-target":"=12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6swt2IhRWnS1Gd/g4gDCNOu7GVeYZqNzY6/440Hx4MZ2F6PWJi9mwcWNjdhYS5B0ymGPyr9jl+fnnbMj/S0WVw==","shasum":"98fa8a8c0266fcce83c2e0bceb84a132a1674663","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b3d21d31.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jECRA9TVsSAnZWagAA1xUP/iSsHTkSdr6GrE+xEmOt\npVGgSEVUkbTB8z7DegGpiW4o++EaYS2Fyox3KtjaM7slaBBEXraAufDaq1Mw\nxKec1+NIWqk/l1gZXlHJjMpCv7Ayl1rPAolt444KcRORipIfxSK8OYcEAQo6\nfe/4xvABJAojlYqsyZAfpfQAiVfphdxpQj/69w6NwVq0wqqFw2g6mqJLhRBK\nULGkyvaSvBhkvIWspaNcrbCc2cdlHWq3NPt1ndmHyx5kS8AKxV1kYmKfVNUB\nGbH3DbWKBZbTNLze9/87g1DEYDTSy7Tkf/hUUPcZnyQJFIOC9YnXjF/I4iUP\nK6VyfRi3IVJl+YbAxrAh+VOzSFJhuQFoLbKviSFWYnhd8F1GUFiaUynHfMdI\nUE5lUNqiM9tvWtrSVQgzyNrLiejBvbbKXJqdiYs0UaUHC11TZwy4CFh6pJ0U\nSou8nh+g+dWFVbrPSyLyfROJ5kBmjBrNTOxBYoNGoL51RgBmZB5OZkXoHeVc\nJ3BaBI7n0Kp0ibgjFRgmwEopI//UzwY0mIVZdFi9EAOaLMolP6QN5F/pTMyS\nfGm3h4khdrBj5UWTf9+Zz3KiWRHi4BrVtV41uJgzhTOTD4LXI6caNLxr+lMl\nYpWl2FegURxTutmL1JRsy/EIopYvbHyhkTLVDil2nBHy6aXfi71Bmg2jrxWy\nA4+P\r\n=jkch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJvRpIeUk/QYrRK6GQSGYCGcXyq1viPXTeb2BxaDkM3AiEAvqkPN5yeXmX63Bowx4wNN+aQZHHnCykeR+ADgEQh+/M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b3d21d31.0_1622141123616_0.22586279997617242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.288c33ec.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-ripple":"0.22.0-canary.288c33ec.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0","@material/touch-target":"=12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZX49FGhQQYiXdTXVXGWNTnTOdHVk953uzJ+okJYBB6pK01XH6DoKo8q7CEA6QR06S0Y2Huwt2Zf0+8fYS/fRpw==","shasum":"8cd8e5b82b0ddcd03db60c37d862b66422598bf4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.288c33ec.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9z1CRA9TVsSAnZWagAAfvEQAJdItsH/rscMUFxOwhmr\nkQrJMqEXwPSx5E08Em8xZKbIH07giFc9EjTxEEEMoZgfct9go2TukjIqFPzv\nU3y9rJR/Gs4x/qg/j7DYmLEZk+3ECX4ADL8324a6bOFJ8dBld0ZuRps+53aV\nonIrcviIMCEHHJ1LhA4Oe54x0kXvjBeisZxn/B1squxhFKVDlO1rOZ4rCL1/\n5uWADgjg5OZ0N0s1dENE+/Ev7NdjnoVjinXbx4PYN7StJVzKmkUNI+wtc263\nxPqa3ZRUmwr9k66wEb7JZIQgmL3RfS1fRIGyWWNqGQDIQNcBIfcLqWaq/D1N\nLA9pm6f6tngFiDYRh2TqbKadts1P4jJ3dL4oQ50vzTQpIut94qGn+6npEteR\nAem5RmM7GGOTL4EE5L5VffjHj4H2sp57ZG0Jilv0cnsZu+FNpdhU3LjQJiz5\nBm851uJ0lT68zm175O9qCFJoNQVdbAKm5W/3xeA5XuLf+4vjAVc3vWUvGxda\nHQbo7mKH/l8lELvV3+dAKt3EuM/Sk6CQEavsdJAndryMQU3NLj6aMaE5/unj\n+oWXGEMcS76L1C/aNBv70cCIq0f3R32wLAhfJCzT5QSKwpRdnH8FhvWhwmhb\nRqUwGJIrhGVQl6KOEFargDWisRJPopJDmLyECiLqMc4LXV/I4Qk4Gy5Moi9W\n+vW0\r\n=n93b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQhRA6RTicuwHjFZtqESqwoaAhD+Htbsleb+31j6ypLwIgG2ga1uX7Z57wWzUvR0VdCbZnu3o9ZQCsROK8xSVbzqc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.288c33ec.0_1622662389610_0.7205813145375117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/touch-target":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DlhJjvuQRHv3YdyQuMDyoHT7o2fFPUh1Pe7PuXU/qjBnbnd4WEOc0hRjIIwcLxAhdN2Ns1kURHKpi6h7BhV8Zw==","shasum":"4370f20e79ea78cae61433a663b6b097fca4b222","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOdCRA9TVsSAnZWagAAVJUQAJ8vLKHpu5pAxAJ53yPw\nTaCdZDVPQ0eBNfNmeX2ucm3Vd6fFvjsA8Xf6mFVrbhyGxR/5gmAmwvVkwXAn\nvQ+VMdYR7VYgejDpznVtROwARgNl+8GEff3sct+QZzYq96KnykX4bMsPJRWu\nf6icclmfJOoOb/v7rPkvnwBFTkjrYOqkyWsbyrc7D5EQLv5J6LtEgx01+aPM\nlhf/ssohyce0uopD6cVwx8FzZWPlEsdYhhzcCM291OvAOEJY8W1OyIaLmV4Y\nUI5i5SZMFa9/1UPjVy8sSJOJs7mbRpfe+DlIbd3uGae2JLYRM8VRiYv9foBC\nbethLildybwwbtUfzCH6N4tphVJ//AgBAiXHiE5SpgLK9hJOjuPJ6O/gwqm8\nyV5zwnwHbq66s0LEpE3R2j+Mszoe5SQTJ4KS5y68rzkf2Bfk4hqoQUOjNqBN\nZ8veqvx1+kVK8wyp7sk2bBC4kIj/0UI1nzF5wfgTTkJ0QsWEznx8qmmvq3he\njS2rjYvX7MpF5gG2AqDtMYmuTeCZ/j5dpmN3exGGcrxKVxP440ArC1QOvFbW\nwEt35adnrgyxSnas+PnvW0nd/m/lF1dI/nO6/l71EQDLYTOeX7wtU3bCcnVt\nJCYcgpeFCUD2SjLcbuvK+M4vPW/dbmGhUAzQQ+neC2uQIRe9HIssE1rSzCcu\nArYA\r\n=83Y5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBElipq7IhMFJS2UpcYlQwrFBkV5UBBUd+gciKUsOi7AIhAKf0WGEwkKkagW5pc97NnfuAkC2swxrSI1BdtCbZiEOB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.7eb7ccb0.0_1622750109760_0.34894441123167574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.7fcc0726.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/touch-target":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eMYlkoWOTSBaOMHJl2UoZYTjZnECRAQ5nW0W83/GRsstrTo+EGSya7lAPrjC1SAVE9RaKa1TdADs98YP7iMdtA==","shasum":"26210915194851942eee88635a33e9aeb6846390","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.7fcc0726.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2uCRA9TVsSAnZWagAAojYQAJkb8xpQDWm2Uea1+Lts\naTwlZmgOjAw8Fzp7E1vosCU7m77VQ4jjx4KbCIwOMDEMz9D3qKFCrBqurOhO\nO5H8HVK0W9YigChN4SX9AhFBZzuNMZ5Oar1gskTAeIyQkuPPKD/78pl3v9AM\nRLpY1pHJomZC/3AIm9m93cdIGhiwKvzYKynfvMAphdjcosiky0MRA2gtKAH0\nmjATds3lPJqmDG7kqlE/neSChZmMQQEAMw5jgWtDRnFOLkc/9adh7zfaqLn4\noivMwluzVeewwjoBhXAxQ6/eaqh8XQBv1UuwTHk4V9QKlKR8CGEXMl4nUE9G\nKUDZBW5oBrm7Mby4+eaXhKovgeFeRtUg9hk7dUPny3wXsDv5amEHEhptcvAc\ndVh82KFquIk8JQN8iZeCcKnmBpQUYXmHtSG1VUF3Vxw2X6LQq1kHDOSY6eb3\nuzJYz8l8eFuvxgzBIBt+Ge//f/+/OSJ0xhg1IuX83XfkR3Cgo6IiDZxrDJMx\nvgporCWETuV+V0rP/SjAIK5gGQmZRROvq58RLdp1oMo/ZYOaPB0Fu5BuXaZA\nJiAykXyRAxdRgK4uMgfE2JV+DeczeUcOVm0a6wo01icuTHo0PClY5l2cn03g\n4sq8CQemoSayQ00+eQZWuYmPT6dXsFkQ9oEDNcG91z9+nxSxSSMuaQE8hOYo\ni83f\r\n=PHy+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpadYcQOfNuAQ4Eyg6egHz0VlxLJp4iRaCj2wcNtYl2AIhALPwClHGZrkvYFJJ7c0UVJUeaG29DSWwpBljiQs0XDzj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.7fcc0726.0_1623113133946_0.6910851627596557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.220a4e5e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/touch-target":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l62PiBWBXckihYo7ue7lmCzd7gRoDpp4JTTgmBn8qEa2j2nvOvDguKFoDW25RaHFCgV9V8vnqLhN/0drvdsmYQ==","shasum":"a97a4b0cb6d7bb458d9e59c50bfeb898f5c04399","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.220a4e5e.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63VCRA9TVsSAnZWagAA8eAP/1VKT93gMWEjcveb0NOf\n467loONr3mro5yxcJjnz4bYhBPbXTRDL6ZpvkimksPyrPbpWriLwqqD9soxr\n3vu3urDb4U9rlRK80hd2N2poI0njO+u6CELiV280en61aPzBT/CF2Trg4ODC\nSyPf79sJWyridllAPgqx6W5G+Uz+FpKhSf0qGFQaPMpQYWeXWsIzUk32mSA8\nXyeyJNmXA+JYgnpXjKOXpgLl9xWzGtPAIXylH/gslGNn+seOtCkFF2+vCcZn\nR15XPQ4jClnds4F3sX96+s0oVDG73HkPFxr2sir/nZiBwtlIjIW6ri6Ob/sL\nZSDLbu7+NDyWAliFljMTASxJMW0NObAWQQXl5Zr//+P6IZfla3LBudiLZlhJ\nnuf4LVwnd4Iz7rFMc2fVliI50fvC4MTR3D4BkUJEN7/N5vaXPRG0z6fNyJd2\n56qqL21nIuZRQ4mn6QDZMO7XuIfynIwuWy5IHWS6VWLJ5aWUoVaLHdlNN+Oi\npiIaMe9s0+Oa6CtRDaBFoT/q/50n0gxORxOvWO+CmtCFNWMknMFo88vDtW+Q\nQqW3Ga4lHJuWBWhnXJNgDm5Q7Q9aHxgTVKo3J7dMde5PRwoYSzTu+zATDRvo\nxLp4qEIcv6/DYmZZRC8RX1jK8Au+Sf0iJOChqcNn0d6vZWtXEzg7W3Dk0urj\npSwQ\r\n=LE+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVOFDv2NmqGs4EGAYBcrQieacMiuU8YuVnmOl8XryPfAiEA45fM5MTj+pGoQnX5T86TvYiw8DZ/Wc0OELu4YqbirIs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.220a4e5e.0_1623174613710_0.4408529095215643"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0","@material/touch-target":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b6Un5VXunZTQO+DfzCzYwNT4guU/f+wlbBUiQuaUM0u/Cc9GD7GsCH/wmlkEYfWCmrGaYAPcie4GVt+jc8Fo5A==","shasum":"25b6bdbaa2abdc95138436bf11b797fd8cb3664b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":15,"unpackedSize":82344,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7i9CRA9TVsSAnZWagAAd3QP/1psloQzvIH4EgqnNVPA\nwBwUAm41EUU2j5ijHL07c7/0JBkHY2lBOyG+EWt4H6jfONLD5rdvsW0FF1JY\nislAsRYSxk3HdNXEt9zH3VHS3e1rEu/WyAiNXlWvCoObWeiaJLFp9A9yeE0c\nNOGeooUNCxTxDXKl5n34ZxsKEwWVRkHju3uIEgeA7EnV1vBWQTcHAdV5b2NM\nYnyI9b3G6XGoN9Rn41NovMh41qjLnPb0rnyNYuDT3YoRkvwNv7JZzimKejat\n8m+LxndI7OMD/Qx5Kh6s1PsYtajazpliC58dBBnRclzzacvUlyou7QXvqdX5\nZ2BscJu6dcMM2wXwHXlca4/RY9XMIoUsW0P7cqXkmAGC2UbTxbSoPEQQarwb\nlav0w3B5ToFHOGQ7QjYgn3u5Oi6RqPrhjfviA+kEPO7XAOfhDp867PrDBU8q\n7VZ5SmXIBRmI8WK6aomQHjE49l5kY3rnaBixlNZmsY8KfyrWYlc/CfKBFNkr\nTfPJRxoP11Z6JPWJNeKsqQnJ+4TpL3is2zuawHLV2bk9R8wWOa1viSKFyt+W\ny8ntj2MDXoa3cYTIrTHjGSMBBfGC9Zr5577wfzalHNXvEm1aC9jEgRvkEVXn\nKGtxHVb8Im5mPqy5Ur6BG5Ub3kuKKimu1KMQtWZYt332vOUXIRT0FpUt7pHV\nMZTd\r\n=DkWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTiEoP2G46L+AhBSCYFTFWDWtCsVYSXVYvKF7x/UsL+gIga/I5WBXC6i9kBqFCxlh8ZziJo/u3uV5RG6LDmR3MPIY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.6b2d6ab0.0_1623177405492_0.49569198934813086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.2b20825e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-ripple":"0.22.0-canary.2b20825e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","@material/touch-target":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-havykykl1LfxUEu2uAdMcL/GayZSRft3ZDRhFW3jCPpIt8y/Z0T3NaCbdW1B22ZvHacQHlwhp/m1sLxAfLhVNQ==","shasum":"5b56383843d403b60e5ccba730c17904eb07be1e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.2b20825e.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZzCRA9TVsSAnZWagAAgqQQAI787LGYQwWFg9/GOd5j\nPwrK4TyBwkNi8T6i3oJll5v2n9930HVmyZI3tg94ls1CKiKUanKg/7q5xHg8\nBp+A2fI1PKQHn//EcTDvP+FR6YXh1S+/1QD5HXwakYGE/XKNGX/DvhWW9JKo\neK0f10vPV2eAghubI41P+xUqsU3StfrSQ2MZ3zcBzBKAfkRVMHv8n8YDW+Lz\nOdanMliRHH40M2qnrMJbkn8HC7SQWPEj7iyDClkcpfE23Nd7m6BQxPyx9Cww\n2c86yLRJyLKJh6ec/8lK65YgUq18aFXftknKjlfjY86EWKXsdQrkUtrTaEqB\nl19TpQo9SLjv85jk9bapFXX5ykHj+UpwVEn3iAJ/C19+aYaIg6h/YGgJELZ3\nQVw5Vg2Dq6jo0b3jfrTMv3J/UbPAPvrzGbLxoqrjfAZnbroTezoV9438kn51\nfB+sIMYX9q/NtPe0+t3RmA+h/65U+KarK4iGeEVp4f54NKBV0ZvRkdDbVLa3\nb0txE+4fxUZGBdVAls6ALDYCy+Qc35BYD01q2twCAWRtchfsh/vamslGLT7R\njjiGkjSUnDl2cEwr1ZL6Is1vFJNqyxBiI++KH/QwVtZ/jofkBGGsvRr9KuhD\nwz9drSE5ry9yxbpvHfNj9FuU2+OPmNVDSaNrHnxbMPGORkDdY0wrLAOkVUnU\nZbcr\r\n=SENF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDY/KxlRIorzRIi6qKpK8ecKvWN6KsLfZqyNZiycdID+QIgCVmjqTEQ0WhVoEhf08Wb0y0kdZoJL8vPRzNxcQRHm+8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.2b20825e.0_1623455347034_0.6540863180928023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.e1511867.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-ripple":"0.22.0-canary.e1511867.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","@material/touch-target":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CFZ6lZT7qai4EjuFfZsMyo512vjiTnmrW/0R0DSzk+STalig4RMBeJOUrDXrf2lVJ4TmMv8fdB5WJKVshkaOgA==","shasum":"65b8d386443f1ba1a545a347cb109a6ce394f8e7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.e1511867.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZ0CRA9TVsSAnZWagAAiVIP/RTMochcYHeQyN8gfdkp\nl9Si5JLR15bMozrMqakQYOThgGXh1o6vvOqMI/sIfYUvEa8QJi2Pw1asdUbz\n4n/WjMOnZeSU7uGw+ePPOEx3GPkJ357P2XD3SboBS//uz6KPGHkZjgcJDUWN\nrGhfNlS5tqpD2Zp2tcEOj20toHolTeH6h/Wd6sSp++1TGcTZApMGf6GpVr82\nd/JBWS26MfZ46RkN3NGME2m1dapMw7SE3ypn0f1Ikvv0f9p7pgrLy2k/7O3f\nZ9WUboXE4ZaA3Qcva2AXuOZdFBn/Fyru3Zx3fiHDb4d9LKHn0iwWwKWNwpYq\n0Etn9iOPOCOhNdoh4x6mpZTVyBkxZpXvycl3Uiay0GdGeyrvKnbr4aYH82kA\nRMUXkjTKms1U+B/4izQXFYoVN6WL+jVUPZq81OPLYm2KaTBlthhYLVHaTcZa\nd7xiQlzjtlb593GN1dic4OSgXKPvUJVqRGigaPnqJL70nq7NWtGmRFDq2BAI\n7IUFjuAwBwA1BIs70dyMHruAoYeSlYo7lXwAUaMBP2sf+Wwq12bLNfcHaMUG\n14ZbSyRPQ09PYzin6OCeY84RPW5Quk/5EHyqeF2oSXWrxeASv1rZAgKvTWzu\nYnbXRSxamqk9WkVgaqR9v4ed4bzhvh9R8FMWmYg5O1Dyoa9WPXpsIi2dGJzt\ntJCu\r\n=yeg8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzZawaBr68dArOihchYxYMXRNLuIw9fSBgz5JnFSH0NAiEAo/O2SLVsTn61UYX3cRmUVh2qmhsYJta/2YqBzrexQOA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.e1511867.0_1623459444354_0.21726851302586758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0","@material/touch-target":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GzHIniRNJ0Xu4kso/ZQYvuUdMFJjAj1RNSObIl0iHPKN6D6SKlTKBFtOaOiEv08CWKhoN+fP90NjaoTFuAh7dw==","shasum":"f828b3edb7a3b4a09e66c2e15399b0ae8ba13856","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTdCRA9TVsSAnZWagAAyU4P/A3q6lYSRgoM+90ezodg\n1WuMkwziZzlgKrH+9rBuO3ZGTmAJTEWw8aGVIIGQUR0lljlRKtwlaHnXl9oO\nMOokUtb1F6c8yWC5t8CP2Bjw1DQfipvkTrhfRTCNzxEBuHgFozw81CMmTrzt\nCpGuFiMHK/sOmTXsPYP+3QhpCr7e45KxCR6MjKNcIdNHmFbbqp1z2PSwtUsT\n1QBGJy/JITc5IgzP1+o+VMRlW4T/4rtvji+9VHMXFz0GgPOXwMIGBgoPB2U/\ncoSL3nVRdwUElM9wG3rCpspl2DL0XL6+Ux9RFbH9PyBeGv60BVsIrHE3pwXR\nkCv5RkvOdxPJSkXWWNylOHhXM2UYY3505duFoTHsC1WuFwb+oN9LlTf23NM8\nhrOxPshWNgtYufdltxhSsTQKfhzf5Og7KfOTJECdojHEnBrRPAY6jvfCISo8\n5NlK6wrspUtGpx6yFO4zdYxM3kQ/g+aHIMFdj3wfURfb8aXSJSZx7rB/Vszz\nqjPGnYs0Dh2+a7uzaJsIO4gkGwEbHz42AL9ChmUyh8mIQyrhFLU74JEVgJKC\nadinNhDCqMY0NC/jSIyh3ELRzZsmQ/+5XFk2yEKAX1rZ50AfROK6mmJR5ZvE\nJK8wLbCqB8szPeHvVU45+VFLD3Kwkhj+mKo1uqJ1smBvGTTtRQiIp4lVjics\nOmGB\r\n=aMkW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGzWOucs7+3fTQzaLLtEr3PhcRnRT32M4hoCm7vjK+I9AiEAgV6aRJ7Es2lxc4XQ5GRbdRrgf3c0idxAznn2MXk+qc8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.ef4a0c0d.0_1623786717331_0.33007684076045485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.573d8913.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-ripple":"0.22.0-canary.573d8913.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0","@material/touch-target":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o1OkbZeguUsUm2YiKBsUm66Kdn14ZZGyMfKl3N4sREN+3COsB3uRd9GTFrBuPNT/2PEDSkmepJDwM0NtGZNUww==","shasum":"c6c42311e9afdd7a897992a6cc3a8125fd954fdd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.573d8913.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSu3CRA9TVsSAnZWagAA3mYQAJRUAQdL/9swfVf6Rcct\n/FPUiiLOzVEepROC+hXnGgfCuojl6Yizq+eBDT6FDB4rIll6uZA1Wenfu1S/\n6neRLEdMJ2ucokIJ/JMZ+fdPANhJ772yMilmiSFANxwsPWG9R3OHZNTGrdhC\nRFZ0LWdy89oLLwkkaGheD04d+FnLAU1oKv/cOLjibnxrQNSNJttBpnv078YQ\nA9p0vdSifjSTnarlQs0rnVc5OROoUrSi5ebtGTIYzP6Bo+u7BGGZOe2uUzLv\nvRKw8etpL2v5XcmRAcbq6KA7lw0GmhxHfroGq87CKqPcHd52ZSYIvCVCryuc\npM/lSznUu2DyHLFI4O5fCNqX1wBe7pOFIeVtecPnpS+iTP8HCxXJesgWqSxy\nlAOaVdI/o4ThTFv+KT91/WvUZEppmqyipX63K9+gLW95/VDySn/yuM70iIfa\nZhZ10GtRXEjQ0fknVJMoQk6fgURLrEof61nIE5CpD/Mh0XNBXzUQWwF94/OK\nU5AgDk5ls7+DI2TyCG52caTV0zda0JowbqSdCEADvKiAS4clcQ6M6ttl5Wlf\n7UV3YTvk9kJaDf317b8WheLEEtoxdcVqzcggoSBbQRKi1QXKUAwKn16cZwH0\nCQ1tjqewbkEuPiQVWomeSHFW6zZfSzlJQtiJYhF9ws0ptlZ0UOaX4rkDL9yP\nONNp\r\n=nlj9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDeTn2YMm8W3J7lrAyyzxIng75ApyxTUemUHFa1BQiQRAiAI7cyYjH1wpEmB5mUAKBgxMjWclH0gBocKvWSgk+PaGw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.573d8913.0_1624058807021_0.38733875017326036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.21dba001.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-ripple":"0.22.0-canary.21dba001.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0","@material/touch-target":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oTB6TfXxd3Ftacp95E8fHOLQ2GpoDCvoe6hLAkZa6SylL9c/Tn63Is70RSiby5yRCQ1tUzprHPhb8qeNbz3dXQ==","shasum":"9f6967f9d0f4e42edb07920baaaf22b6644d3e0f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.21dba001.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdXCRA9TVsSAnZWagAAEuQP/Ra+8N30Rwi+caT59Ufr\nYV7aZOg0+btX9R7HIGSehvUQWfge+djI5h+Q5BG1p4p62Ul3txEL5lEawvew\nX7Opj3P9z2/uD6ljXSREI4+ypQFN2dNPvDzr+1DcY4f0tJm8Znj4PfujZ25I\nvopMWIknsRyQ2MT9Qilx6tYHX5R6X1zznHuhjwUftzFKswcSSMHyE2FtpeP8\nD1YtRUZY3UV24gAuPnrTIl/EiCuTgweHrB3JuzbgUzg3rE06NVrgJ6TKMMPc\nuzt2GJC8XdBcwA2dbISDX0VwYtosdjApd9BALD/MXifE/JDN8nuDsTUttB97\ndyzcq5Ji6VVFNITYqUouoYPpVeA5p9d3/kiBmOudMG/yI/WgASsO8pSEqcXP\nhOevWvhO8+P6iygH7S/yHtPdLl3EBL4f0hMbpGjW1tPLg7eDeylNPCsnOZM4\ntd8RAb1iLugzHTNYJvBrsqzEEUuJyosu74fxpWoOl/jl0hnZ/am/+ZXv/uYc\naVJiLeYafF8OXX0ZhYAF6PC50OJlJV31oPWp/eiz6/43EXQBPKUV86ggppEQ\nMJ68BmqxmB/y5WcFKPvkh6i6uqsMJybDHAjmPdgoj0cxfLVmZ5SaJt0+jwHx\nubsDtCmIhB5/4CiQETc2byaJlj6+09ly9TSvDemKR12dlhym50CPn0bmO9kG\nhuT+\r\n=x+9J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8NrvTMFO1eIdAtITUKM4sR1KFSybFkVLhnvghu6eLcwIhAL08duaq6UvoxwZBCEO96wy/dQihWuDoPZwfquhdHg9A"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.21dba001.0_1624311639353_0.9425076465992053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/touch-target":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-no489sQtXYEaIsEQdocM53PUktGVpTTYRKXRGu98sKN4CfgZPLUyPyynRdvNJmrMBBGTC8ju+rSZbB/AvtAQ+A==","shasum":"d22bdb395134a9cefeb749301796797f26613f1a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2ICRA9TVsSAnZWagAAv/EQAIO9S8WEeDi5bdKig9uz\ndYmkevOPR6h/FXBcypv70n9j9EAYM3f7pTarNCylfwva8XWc6h8oFeg9CaMJ\nC/qpPliwG9jlDkYIYtdUPKbooqKx0bXLJWVbKKF2sQojfpoQ5YTtSzyBtf3Y\nBFYGAHJMon2eZ/nczPtm5nsoGhobTrWTzVOhnJ2JlbJmIY7BnuMXCXvZFUE2\nTIFHo9qsBIiDPSDecbg+HjKMd6sPXMiH+Un5eADeJKRKTWAK7U68grGdFqUe\n6PKILH29WjS1QJisq+9pW9W1WPhDM5Nn4geTTclt+Cp2Xq97ChhJafVB1eB7\nfa/kT1gGamfeLsl10OKeVa0SEk0kbVDYxasXt/8P8xZtC/xz7LBP5OyOBTOb\nLHEGJmaJq1Q3PbIEZeInpFupaboDFuPH8YsyJewf4LdRDXPSe3exu/O3gTvQ\namPovR2XEmcYoSQw2dP66zTqgAyXRRmdzDjg0TulyMcg5vWWcBvF5ZrmjKu4\no07WnSogSdGqs1g14r+scqKhFiQPS0ePo0J4b2eYGIdzNm+bZtEP6pxz9MSs\n7HjtdmoBsBuqdDcczIphcCdWGmvrZUfSqlD32ZyXIeoZqFJJ3kvmceuoPtIl\nkyHRk4+KOe4xCQqEZdLuRGEOSL8cKFkNZA8vLVtDYIiktr/0ZA27Q+aEvH49\nIFIv\r\n=IOnm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn+gkTLbhP1ITKbFhS/dAwRJC5Ncn6faJbiTvP16XYGgIgYDE59tooNcmAuv8lOsY/LZbR9RqRJ6PoowbNXjUcaFI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.6f5bfd0f.0_1624575367808_0.5657265948026697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.fd8360b4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/touch-target":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tk0GQxUsc8P5AKqnX+OxP6ofkr+gvjRvYYP83x0virDW9pU6vd1LIATLeJFq4Deo5Oz4cbaCbqhjJaNbE4f5uw==","shasum":"a92e7d7ac8c1ea5e5c100c1c06a125be813f4548","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.fd8360b4.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inWCRA9TVsSAnZWagAAgEcP/jCrWPzoSmJ23M07kLEl\nSy5oRmsGb2bhy8yzsiUM3m5krBM6SZcy+nH39+e7GpFnGqrG+/paQ7ixUKG6\nsdQyKuHBnwb69CriMP6cV9steibbEN6nZUg77Hqzz+MS6BgidMtZDJc08ibu\nObHICGav+jda9KydRRz5UnkiknB/Z22R3C+NhHn4Z7tihrbtiDInZ4Ehr1Ca\n/9O8otjP3Y00LzfPNO2jnu/PxzFTFHd4bAgA0IfkcyQUj1E3ToCLewPpUp2s\nJk4kZZ7SqAR5GxtibLshdv5FSonAeyKtXzcxpcoimt9TeAw1TG2AI22sMvF5\nn/B3ON5fDlkfcKDYpjL16Svf7ljH3hVrMvx4bMHn4ULUL9QtF7WX6lKNSVm3\nLHD2pFhu7aC2JPP7wWFUUmXYbPR/0qC5lXzHsoP9AcU8wO7GDYPnX/2bDBoa\nn5ol7W24vOcycezNrbVBLeJKBma0SCl6W82UWqxsjy1ib15uLvSnCsPWHFlS\nvvwLn6yTGYgfqU7Z9SYVDlyY8gOgx45pR5NOB+iuFEVKl7U6gocJw0YPjhrH\npOm1IGwDnKxFlD1PpggFWXI8Xtw0U61SNMtClMBQJiUpoX63dkqC58j8AyMs\nkFqJXUGxQgvscRWtvu5sZZy2a25AonB6y+whB3eyB7QUvUHjgV8WrdXGXi78\n4GH7\r\n=LfNj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyPMTaM9zmkeyzACrkIrLf+K95IDjHvLbK1FpQD9ZSSAiABKc49GqLVAtGStGMs7T3nhWXaDb7V96WFxrn2J8WI9A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.fd8360b4.0_1624648150456_0.4704318939897798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.6f74432f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-ripple":"0.22.0-canary.6f74432f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/touch-target":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D8GwxkoVT6o6Z8ztu+B1HF1dgQxkTbFZ5dp/+ZfUQr7s6XfTNdJH/VkrhHFC+M8aJa/tcDMHJQxFxjfVKSOnsw==","shasum":"977449f728e6ce632e58ea93b66621294784bf43","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.6f74432f.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDJCRA9TVsSAnZWagAA3FsP/j3l6plFu+6byW605OHL\nNE+X5lNGPrmgQJng39k/kmZgnIw2VlIh7Ve0lRymFozpJUm/gKUSmjwJejcV\nmH5YPrCmDj4lKaxcK7Y5H3cKBdxmpJZeHHZFqqDEpNYcJdySXaTcwA22/GvX\nYeGhZWYrlRqI1ToMZaAOG719qfrxsJF14lG4WnZgE2ilTlVMbS4RPmFoC+08\nIX0i885c0G7+f2Kre5fqCFMoaTVwEqp5muOFEfdQ4/x9bd6/xKZndI1LFhuk\nRaRgVa/svrd3kCF5V/i/pmNq57rPjkd0Zal1T0686GYmgYG9MlN8p3IJbOh6\noT3b3bftICzdkKKpVx0NMcwFLED4o0avT/3+SPz3/gwru8sAPiH8v7ztYJ/o\nX9EV0DA2oFFo6r3npZXA1HbfjLYqrjCHPqXlaG+l/bdJmCac/NMt43Fr1xiG\nP6fsE+DU8i8UW1rnkmLMhGJeWZ6MWkMm4R95tmUMr908NLyxW/0lvQgT2jaL\nQby1Jkh51LGRnGpWrGBEAakZAkUdD83i2GcHky7oWOi/q/3CjtEMul44d3xV\n0Oxg6Cd8hQ2I18BKJ+Ke33AhZKJyZyvlUSdISGDAQtvEg7SW2GpEqUZj5+QK\nsxXIdSu1fzCj1xqR7dUA/XCwNumRA4G66CQThNFWjEcJebVIR6U4pRuIGKaS\nzPNM\r\n=ScgP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfRHSiPPf8FDNK5c8Y0/69YnZaO40Zuo1xZQFPyRIk0wIgL1n4SiP1wG/aUBf2tAmQyMFcs5S+Ol/cCDnmXvHUoOg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.6f74432f.0_1624654025294_0.6704578364144271"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.b62f901d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-ripple":"0.22.0-canary.b62f901d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0","@material/touch-target":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UJQv5FG/2Hi4HyOw2zZRDauREDU7B3uK5U/xrWl/g2+imwyVkik4Ev93WXonCag8xXVq/FuvrrfKw32zKkTizw==","shasum":"965265784cdca539e637db97a4972f4e10e2d6f9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.b62f901d.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXvCRA9TVsSAnZWagAA7/gP/j4/I2LVyJPNLp566Y8o\nnMo+raYrG5YwvEoSoPhOvJyiL1EWkKgZa5Um2RhUsva+lr0ivoeD0Kn3DDYQ\nmQofgm7vhD7qvSzFHlFu9+Sm6hobtailJCoIEfSq4MnrZRHVUYLPzEKxS+I3\nd3qeMoEzb0pxeW+cMGyaQpWjD6XH/aPGSZWNEfE+Tve9+fO5a67iTJ3+sA9j\n7NiTFkPUWP6mHg8rQfcPW37oPEWIz+2D38J1UFcWStJu3209ANJ2DVOHff+i\n9prgFZ8Lgitu7MtBsOlEuYoaEypdxMU6ZH47UTSTaqlMQahXkefdy4hnZ9f6\n4S25WPYD8E4WUxsgVGh5uuJv9r13TZPVW25fJGJCBzazHT4oDRnEvOu3iEys\nl6vg2dUytsD5JdINSFU1cYMQ5ECTIuN4bEN1fBNiwqkbRYu0NMvHY5f/KO4v\nPVFG7OQqWZsvezDuWdYc9HugxZA3gTM2AY2HH6j/+GJ1OmWHxeqNeOFp+34A\nYrmMqywQE1n4Bqk6dDct7iZKLTA1TlYfwdl5slggPvN6p9TiK9t5oNot7Q9J\nxs2eRfSVfuOKuJyrDTRRh8nunb1ddZPXDtRMiuxjl9i/2EbQLKRN51OeWT1L\nyTNQMEEfPCbntuYIkpH2RHAgOnD4/XcDV3Ew+9JYrPjzaLj+kBllMwwCAtJx\n/rYN\r\n=KvMy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbq21pmsYoSjRqQ3LWnDAHxZ994enzRlg0t1rIDveUAAiBOo9DPIz5XmIZ/wcxXmGd5FrbuEjCElbPLl+gwLYoBXw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.b62f901d.0_1624659439454_0.28461815733362883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.73122cba.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-ripple":"0.22.0-canary.73122cba.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","@material/touch-target":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VGfI4oSgaf+Zug+k7Z8tgLBBXBtP0X/UYc/lOVby/yHEoudSUhtFhsrdUT+hRikYMb9HFnc7SjQAjlSo65NDBA==","shasum":"70fd6a44a6c5396d338d81f48ed42ac9e8f1e1a4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.73122cba.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfSCRA9TVsSAnZWagAAxmEQAI2EUHRmsAvmUyOInUe8\n86ZKiT5EjV3/4Lu4B6+otifW0L8gOqs9viHOQR0kqKCXpPZG7MRHPIZKYY9s\n1lbNwOHhS3JtavHWqMdRGsiTvxEoSxXCy5f/HGjXGBW2vsaNcJjrxtgWO5hD\npXAesGPICxM8n3aKdGPzrgczO9W/m5Ua0qZmJ7Pzo5ogWfWURheIvSa15dzn\nZ9BgT8VrLkvUs5tDEm4hR2tToeeP0Ke4fKMd36xvG0OPmJZQlozbOH7LI3px\nJuc//3joQOFG+LIMGGYH8dPEvehTx4ti2V76Zn+hQGiIbWu9ZQIXQRjrUrT1\nkaJm04AE3vh4AglU9fPigAiK/MTyldar9lavZtemwdYLjAPXh3tic1+kfnhe\nOoUTIfI7/pAFyliU1QwIZYuRjw1g3kL1qiQ2c9y31XGaLxtvTzSidwki0A5y\nQffbAX+XSCe+UqPBW8WjnGBTvHW/ynkm/hv7ja0TjEfwZ8pejRp9W49ChTkq\nKYPM8IfuoMUUidrj6beUXSXldX0UQNbZ3HLuz4ollTRubjt8dqL9MOFjK8SN\nVjrOuVrOi5nvpkdOCQd4oOaIK6fUs35R2ao8QZ3OdHKU6LxHmcJZ1shNKCoo\nTDiQzcv6bp2ikhVzebVHX5UHTX8piS2Jfa/ImdpIhiYyFl/4/oIRRL5MUYGH\ng+rW\r\n=gJn3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB45FXXmaDyECQcHIot1uu+6Kp5G6xDzeFmOGav7DGYQIhAM08V6wwP15c2qaonQSLyGpuLH9s+HE6zmhr8vvl8ZcC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.73122cba.0_1625081810489_0.7402391604661824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.a6912af5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-ripple":"0.22.0-canary.a6912af5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","@material/touch-target":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oHXDpu9EoFcjWyIMdj9LDI2/xvLyZzWZVbC+zF+eBQAq0STh516esUtjNvw9SYkX0eDEO0ohgm+Za4rKA3tc3A==","shasum":"0138d03efedf636bd16c77077ec9237bb7385db4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.a6912af5.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTPCRA9TVsSAnZWagAA1WIP/2+cBj5iyUUR0e9elN90\nBYQQaiZZbT71bG0okrCY2QJa+lDL8ty0JbBbbr1X0mNDxrON2TJceIUMrfJ+\nFHLJXhO33ZxWD1+bfvHIGYLfxDk+uHfpLATATCFVokTOPmzi23iFMb4s0zn2\nm7IJ0FnM1jPO1ZeCVtAMk+wPF8iBGns5DFmw13BrIz0lFyNVf4fJqna2N/a3\nuBJRs/x6JJ7ACby5drjUugkM52bYbck/QEJrXiFhhpLfdED+mQCkiKUepumn\nSK9wBRKxIqW+bSo9lw0oQdgKUn2BPATjSXFlyeOes5xySHoGCZ2ijIBzoKU9\nWPVjOUUwPS8rU+LzDOmlnXwGxO5SpEoF99IXlAyEJSgUvowRQq8jaBE9+hHR\nWTLg0Lnc/TSTjH+SJdznNQxF0B7S5MdCnBL7BuGlCi9SqQY+UUqTiC4DykQs\nK4aqon1nN7g7F+cZ+MITLQuKiBXmpRYlIUewuXNE/nNmifIT0C22sdZ+Gzj+\ngbYZvXjCwzu6H5GfOznFjyoDU2BSLXooGsIEFSPdyhy4uaawC9mMvy+khGGo\nV9hZVz3dbb7z6AvaXIhjycVxMvfIt/AikM6fRFcr8xlIHhtbJpdo4EvlMi+y\ngD4655FQruO1GrNR1jc8kpFo891r7UePwcwYC5Z3x245WXXkY75u6mK/tYTn\n64X5\r\n=+b39\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICw+BjzFwRGxMm8XYipSssgSq1X1k0L60s3kzgT/ziXPAiEAyEzIT5OZxLHRKE42QvdNLubbSbd8E8jMBKbZn3Nic5I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.a6912af5.0_1625175246917_0.4412797125995591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.134f24bf.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-ripple":"0.22.0-canary.134f24bf.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0","@material/touch-target":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fHMMgiWzZx/dmhWenvJ1e26nBQ4EU6pSNAPeC0Spq4ArBVFpD8DkvgCsZX9EFv0teBR0/+pqOL3blve94etjLQ==","shasum":"dedf4c60d82620a0cd8e61ed1d67d6ea37cebc0d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.134f24bf.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJ6CRA9TVsSAnZWagAAfoMQAJjPW3eGpyZ0pIBaECwi\niDNfQCwVxLBvNkssrxn9CwbvJEvSvAhCxG6i35wM/sS6uYxQwMu4aYb0wipG\nkJiN41SaH3m4RfWlJKdXkvOvubppN1a3HEU/JDnN6YFCSVp5273TmrjVkJB9\nErbSBldGe1fqGtztdOperAQajR/UQD7FMiazHiq4wfjkhT8QWwOIfNo9Hg9e\ngY3jfnl18Wdaq9BrhNlYSlCqvhY3NUZPaNIZ6mDXcKAV/+Qni3pbjjG/bSB8\n+MFXFjA1JqkqZxd8tKaQQGNdEsTd50VX95KYdqGTF7RJkBi2lLN9lpovcnUL\n9WO8l47cC3/P66s1okseS5JZaHoaFPuTk69Lx2HSZCEX0G6NE1kn8cAecM7L\nZWU4opdqsa8z9djYgHoRPSkNvJlbe5v6iGvl8uSOjfsbX9mQKqYkGiAkkrvQ\n47Q8o0yLn2zc/D8/L0EutwXB64HEoiGDzVJYFXJd6QVfBvOIbbfxAl9UTGf7\nGTkmcSqKTRIV+u6d9qAxrhwnqplrMhazcFcXavy749eiSwYGqJp/l0WRhkr5\nPyKvlvd5qg+P1LacnWQYDBaVJDLuryRqNmz/dsInmIM2fy2vjXHUIzbE5l+n\nC55XvmWKYTs724EkkkIWHWZNV3O5dkIuoBXOCj2Niu7SXdbP+byK29euRElE\n0MU/\r\n=QuTF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBeX4evYmMkvHXNMKFoZxqWZ8T7ujn8d7BvsXpB1+DvwIhAJ+kXOIfv9Cd6vq633QKZegvKJl90yIXbRa6CbqBzKPr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.134f24bf.0_1625178746471_0.29704116236890954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.1debb78f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-ripple":"0.22.0-canary.1debb78f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PpyDllWVkEcXjdZKu/C9jDBexWo8I7KfS2HrnyoJBJicou3LOAeyYSqSXvlF6RumrBj/cm3RyX2+MGHT0MHMOA==","shasum":"1fddda4e5362181b17aed6bfa7886f15913fe5b7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.1debb78f.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlgCRA9TVsSAnZWagAAirgQAJXDF5g+NPbBidKjxlsc\nlYsjBirZVosTnUwuG8S4QO0aX+5X5uQRX39Eq6jH7mEmhj2BQd+OzRI53Ar9\nxGJ1MvAtmhJ/riC/eXE6Bj+DX8o/SFmwbdLBhPNdrtqC6eE3KeNSWnkwsLYN\n1cky4iDt5geCnRxk2hjTMh8JzHYvhgFuwNpHSyaHz56EF0GpscF9n5ZYZvWq\n5L+ftuFWtqiV38e2x4fkhyFh2a1REfCE2CwelqNDa5ULdr59QjNq7KetunJp\n0+LeSaLk1qG/efHfSok/EGpi8R5mHNZDJuWLoF+OQzqUgByClBk/AwE9Uewz\n+PO6S6bz+Abq5F2bohTmxy15Tn26ztcLyIzMSHsR/11ZTQ4ShKrk4U0Y8W2+\nhQStAkU0LzkX63pEy2c0QCv44V/KfMi3jS40qPTcRYL3eb1sbmXFKpi/ko6l\npbt5dyeoBv7IMJenWKUYXBPNC+E0A+pPg0zaN+6YEI2HuBr5Qsblcjmrwexh\neZc5wtMVh9+/URlRq5adMUP9qWi9xmUSyKXJY+w/N8dX4qImY62+2Mf67cqD\njRe/hfWWLpWMw/6YuETrEDp3UxDKUEFCgTHms88tpeVOHoegflB/avry0XN7\nxZMd8+dPQip1ZkCoVcBKjmCxDkHBRDxNKvzk1iGvIuCSvX0ovZw8uZ0AjVF+\ne5Dm\r\n=94pM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBXbcdf8qKARSRu+jRG/mqRUhiK5Su30dMsmMNuugC9sAiEA5wmMhtvFmDYu+pNOOYLjAL+Kcxisi9S/xvJI+lFkcYc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.1debb78f.0_1625618784185_0.9024273180994398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.d53edeb6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-r//YTjSIlRLcaPyZBS1bhsjz50zAfmcrOtb/IKz8dI1n+FKxBD7LOZeaBiym32vghoDX32arE/3Mxk5qDPMfIg==","shasum":"2883a332a0f0db533aada9ab45a7f3b7ea51e9b0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.d53edeb6.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2jCRA9TVsSAnZWagAAls8P/R1GOQ4qT8UL4d5OI6Gc\nndIkqq7cP3JPo4AeIZu5U8SZ+0ij34Dc21aviB9pHFj8dKhw6+xq2qDITGGR\nBaj+/XMoOMBHDaOOMct8v48o9CuKjKWwSCtyNmmLLktGKmQEaUfqhF26iNrc\n7p3WHlhcrBIhuwlyy7rNQNpON+toKrgvxS8+eHQSKzEOGi4eFFpzDAnrUT6y\nxq/8i4YbnCkm7a/0mmjQVJ50YpAy76uzTxN8pW9XjXLj4TlSl1rINt5o/Pl1\ncFoph6UnYdN1XMrvKGaL3WGBG38r1+UQItQiGw3+X90wL7rf6IPxXfonUSjW\nk13cV+QVY/l3BwWOT3jHg5qNYLTmjmCM/1iImL8sxTAkn9Dh9WOIW+EDx2R/\nw/Zs7yOqhx9nyEvnnktbp3NbuQ0FGsiVb3qaHs37B1Ei9fRgRWXsV1K2AqOu\ng+XZiVTAxSg3+oTQySBDec9VgpKt8zXuRxlgswI/2EHrDmZeq2+GqTahbqQE\nfE621folVR+INJvCNw4QJ9VWpMHKLjd6/iCxJnDh+tm3yASw/cfxLIL3wyis\nZhtI+08ssnzYYHmO5BxQiOucNNsM/RythN0dNA8rDwI/5OEuPZZA9x/0cVmI\nJJa14NHCjVORce5XnkByQXcX4PDWRhzRXO+D+gjKciPj+TjJG+Wq55wArFuT\nARBi\r\n=cd22\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHshjVGlkJnxeNM8bvivELI1zTIExYVnKgY/6iJL6gnUAiEAhASEHx2k+Ya9zPocm9Um9HM8nZKoCOGM0sb5LB50DLs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.d53edeb6.0_1625677218717_0.10261752389442935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.2226489a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-ripple":"0.22.0-canary.2226489a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0","@material/touch-target":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ROOxXMO0mFEP6wuPCkOQNDfycZy9hXH38OkcbkapRsr91m0fhvSvacq5bhFW/i96bXzZdIHI8oJjZS5SWzlqEA==","shasum":"829f74ed3ab7ec57d5d5930f82ebdfa6a53de76f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.2226489a.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z1/CRA9TVsSAnZWagAAS4cP/1CXqlmPRJC8QMtnfaOp\nZ2M9nnxnIy1p9IMc9BJaVPfguRAly7Wsqtl+zseFwc1E83b6yTh5nB52hGLA\nwohgipedSvGfpoiVqjLkT9ZmlMh+bbdILrD6q6o17ED3+YPRCmg3axYuvPK3\nmMIPZF9LSeWthF9AN814AiqiBqQ20Rjfbl8CT4LXhvMTBN0Jul71q2TpO/Iq\npe9MZtG2KYip/WrYBOHyPi38wljrfTZZxyOJYM/ZrfaaynqtSBxKsp53yh9n\ntar7Lbs1muu/NhfNZbKIvz6eTXTQBmlDF9FxziRDuPAR/nytxNi3qtakZk28\noN3+dTEh55HIO/qL6T0q25T55ywKO1maqjGPeyb8kVKS0u9YkueFlpH4/f3a\nhYZamFRc1ZPbLlmAc5bMqYpMejSu6CsslZYv7ANGdqsjXlFQr6QwEt4scxxm\ngbnJ22cgpc3hoJOk9sRRjKXckivW4gJwD7LQ8WRBYMf/m12YSczw+Vh8E7pf\nKTlpg+gn+cy4zgnPOBkAz5Rgf7lAVWjQQ/6ghhLWzT93ByKmaicnYZz/pqqp\nENqxrvPCGd5ZOhdvuV8ej+UudMGwBSpmA5NdwelUeLT5hPhaNJHlB4Gv4Vp/\nV0yOgCMBGxcXHOOMXh4VumIOrKm7ZtaKsmB4CN1BE5r1UYL72SFNK0VzlS+B\n9nrh\r\n=Rglu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtBiLMa8ri4tECV+3K/GYHJc3ucPwxWQrdSHfdGi3CYAiBktP4emDfSowfpJoxvRLO8+JQqgsz2OFkylxc/02hJAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.2226489a.0_1625767295078_0.9889975618993616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.d4801c11.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-ripple":"0.22.0-canary.d4801c11.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0","@material/touch-target":"=12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0adq6J/kcDj4rGoV+Zdw7ND2yk8WFAm7HMgW+W9eRsUK6nSIbival9wiWa6/Tg+J4+hQzc7cxEh3J4bRfhrkFg==","shasum":"570b91a57750ab64f4e33ba852b9a6885a35a07e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.d4801c11.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51noCRA9TVsSAnZWagAACDkP/1RJqH+wJ1S+4yTTh4l+\nyTnGVejOX9WvfA3LORZWd8CU82pfsJiTbJ6fyEMECdOuyrin79asDirB5UkT\nfQTQft/t0C0j/mQeVLoMvfIHrvfQQeM2bAT8x+9ahI+Yjmzww42HRtaNILLn\naUtaJvWNmQ6k/coKXeZ2XRGUUoide07/YMiqEG+vJrUiN3MeYzxyrG9KeR1N\n1519n86s8VkPfuK3/7CVLHHCkyXh+K+upMsTW9kInGqu05oLoYNoDC6a97Y4\nsyt+WSRjF90T8xfbyu9czdSjrcpC0TUcV2pgarQOyGxwza7hHo8tdwBHgSoc\nZFqrzilBmTjcGcp3nAWM45MKjoPPzgaXcQ6v2ec8wkewQPqQ4b07r9T+WY1x\ntO+8hhf4eFQRq3TdspqWlUCmriPEZU5EFolk9LyNYUS7nB/DIWKaLiJTJgZ8\njTB5AVv70SpdzRalFEuBPbyTi8rBCf4GsSA2HdKEeGtULsaXBBSofAzGmvyZ\nqs1X+etvAX+vlJc0Nlf7oAz9KIy/zUSyLfiEwl6pQIR+nKsuBcgLnDVkxIrb\nVi3pyutE5mIf46WBYL2GFg/3BO6EOuHBLu1PNmBwEG4ZPOhaTj1ZAGQcatJ0\nXgcv7dw/5MiiGjSHQTZpWNZYeUlGhe7slvv5jILJtPNrL2p9uzDAi7260r3b\ndxgA\r\n=Mz62\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoH75rf2XJwVIa6v03TyyN2pZm+U/6/YIYbb5QlNZRygIgWUU9nRuXKZTD/f0SOvdEDRlo43CP8oLxZNw9v0SXHNE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.d4801c11.0_1625774567579_0.59984258056062"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","@material/touch-target":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tPUicbHLG4Mtg0CJi/oNA8EVbqB8rkYCwdLWhkP+rz0+2iG2yUXiX0VOPmSW46eVKmEG8FJCIp6e1vDwPDIBkw==","shasum":"c88bafafe1cdead2255be8a1da29eff7826d6247","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkFCRA9TVsSAnZWagAAh40P/3XHx6thQtuBK7vPkqhA\nl2pv5IlXwBfl8UQpA4hTqtd9iscxi/vEffEydF5J+lhVKxK3S08dF5E9D1UI\noL84KBZFwIywFiY6BuQwOxmDEu1OBgP47LdWDZ4PFX8K0sELmRzM538Ju3Jq\nPMCOy2vm/DkAMg7zC0XgS7W+rSrSnhT1D7BeW2INo7QvjStEDzmYaseR3Pzw\nx0FUciLWhu/5ihMqTabSfokEU5K9APGxpcCvxkfsGvEsqOMY5vTPDRfNzPb8\nZjIGpkkplEHGp5D5h92LHZdimmdGxzKgqKbir/oaUvFOJK4MInTSVpiSTB3h\nEBTzA6+lQ9svoaoSuY28kjMnRTH5/dT2in8XlJNGhe1grHJEeRCNrkPMCApu\nGoP5gapOjVMGNYgHMAdowFH3ltsVzxOg7CCa40s1S3c8dcK5k/ktY8QChyLC\nW5ISQ0HK5ETWKQRpjStj3P6hsm03+CayowosUC3sEDGr+FkSiZ9XCBsBm9XM\nDNkvjWKWGJ7CIwM43rZDUvMg6S8qR+nrUj+K+JQXxgoQ6z2PPE4AMH6U0Bf0\nAJUttMOzr3Wptl3GkMnNChkGt6Rc41BYmzotRxmim+stnE5D85kOhjvJaGm1\n51lAp5tZ1EBUM/t7QpjTXpfbyc+rs08OHIrNUWG6ryQaWLIQ4Fsy1kyTQzAB\nlZUh\r\n=Gfpl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGjYjSkgzxW3huQOAWzj9Fh2pSp3mOt92ElhSyPtvZlAIgRlRZywhyqPy3jyppF6Q4DgfKRaV4ZUTeY/03QThYFp4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.7ec5f2d6.0_1626110212569_0.46809873720184125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","@material/touch-target":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ppNaB/9QTSGj9sESAYD0ZrRg4wJ4HeFLNEHC7DLvOW8hGO/8YFO+SUG5cyK2xiSs9BORdyiKDMcwcYnzs1Q33w==","shasum":"ca8a94fa9d6899a126838bb6a76c947e849b8b2d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.86cb4ca7.0.tgz","fileCount":15,"unpackedSize":82392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9hCRA9TVsSAnZWagAA0y8P/j1HUKrz7gD6DbJtzNNL\nBa120LyqrjWtmqzSPZTtCn0S9OVhMMuFuGmA3d2GB9QUkWataOjch+/UpnpQ\nOrwcvsSdBkBaezFRI3H5CqEDXj7xDeo8Ootb5fbjihscZWkWQIVkx2r1fgx8\npdVES/kXslzAH4fr8Ef+DiEFGajTUP9CAvJ0ZJnYsWuORpunSAP6dvmeyXO6\nDucm9m/rP2SQeE1Ofre5H8IoZcH7HAcFn5/23IMSI218qb3McUhwKN+TTxPr\nTy0xw8p1YEIPuyndGJBq1L+PDep6rQSeCFBSForOwfUEgvR7WkpN5urxuLmJ\nLzRgP3V0EmqvvDm+wzQy1uizJUCqQnsKLH1kX1bb0b5yU/VLyIgFJdXEbjEk\niOPb/eXRNPr9ZhmC1QPlTumF3z//TOlP/PfX+xFNx+CV2AQbPmkRUxNfog/N\nle3C1ISXHsqb0LBiQa9v0JW52h+6S63PgvXv38n5zwEhwXOwg/Gz8aky6pUY\npZrQguXjv6iTPuoICBZ3EfD1opW8UZj77zzLvbrt6UuhVR3G98vGZEwjj6+f\nFT/pgI3nOGrtOhvT3Zd3BYJa/FZUHgHCDRPgPNq+pPqGjFdP3/drOGrcV3+a\noRucIDBhKpP+HfO5V5VnuUrVU5vXs6/AoUBWhSjV+BYuC5M/zgdNCppHU2eS\nitY7\r\n=S0Ug\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3j0ArdOFzazafkDs4Qc4+WfUl0plRq/oprX4YIaf97gIhAMSHKWwRB8/c8keV/uCgXaC7ZIXGVxJ90+GU6Y6C4ndw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.86cb4ca7.0_1626197857016_0.28289740203254876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.bc9a724e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0","@material/touch-target":"=12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RQIXpq3TD+bNQWBmGcfX3M3UWcG51Va2ittHVjAbt0FnkISrAl7cp3BLJAgHOa2i0yjRE66dMzb1cdT7u1Yv2w==","shasum":"e1195dfbff51bc673c18f5f4ecf4218995d96a74","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.bc9a724e.0.tgz","fileCount":15,"unpackedSize":82403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6ACRA9TVsSAnZWagAA0aUP/0Trfhns4TPGBil8UbCQ\nLhr//CtuVgYesxDhK8uudr0qmyDnI9gAHH6xOYbJxieSSpsrxVg9hSRFNLzF\n0roTg4EdeIJrBNtVa+uJPfbBSCdUZagQHdXv6Wk1ewdqnY3ylx8jgbHfDCVX\nEcPcJd8s6MtvPQ6hs0ZJ9VBeaSY0Fq531rpKZ97nh5Vk/Va0oFhscgVFNzmR\npmJz6vCjgbkmPvJCBJUWWU8sDz1JcCTGDv8UjkRclANoQ2L0zyJGAw6XkSaY\nBbrto51LV0zUA7ratKfjg49W/gToTCRdnGg7n5/0URN6NLSYTp7OEzNhzADP\nUBZsXpRwkI2PORB9MuGrW/nnqjZ2Et4Xyfh/n0a2AOVGsQdGUDCwDbeDcQDL\nzAZUKENPnl1fWKVroIqCcSS1elxLvSxY1o1JHNhlInQKV36RpDjU3DTOGvWa\nKsGr33MTcfdGj7oG7IRckey7Z3pQifz85pSCbB6ZGI6mkqP8lyVioFLRnNfj\nYeKDUvyo1vBEG4jb+vPm6Vv13wKS6in3jcn7YtIL/al+C+zKJ8YNXimll+Ab\nY4ZS4f2+NJAoZkBDHHxEin30z4ZQXOucXV6fOW7lkbfnUQmWz0ZUoyIUTKxR\nP5kvWOyOVuG+W33E/OJFUOvJYhVDM8teNAqpXFLRPIZEXjE6cZ5F+bA6SMmG\nkd7L\r\n=dkL8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPwLv1P9l6idyLGoxhW0sAGfhDqQEV82H7x+Kfu694lAiEAoOeY6EIHcrGwIAC8fjPNnwgjBYhyBcaJQV4Rms1TaZc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.bc9a724e.0_1626201727895_0.9033363891151442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.7847b83a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-ripple":"0.22.0-canary.7847b83a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nBrfEDPPcr+uOIhG3PHm/Y8HJlS20U4phz30O0sNOuwPgtr+DHYOl1Fe1kGljZPjKdhmunMAm14Cco9fOR3v/A==","shasum":"80b6d990d0d179559e154d3ad3a7ca59136d3160","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.7847b83a.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxzCRA9TVsSAnZWagAAPscP/A3DhGU11V+oaNVh13tH\nxoRCi13deHcXRHplEWuHV7Xs5OZe3PYQf4O1/T7tYi3pn+Zsw+rVC9xKMx5k\nveVHK1DHj1rm9P1nSDToKmVEQqD0ygF24Xk0BjL0x5F8tkf0GlQ6LMOfQXrC\n0h4JikOUvK+1gkZpVRN8oUZdSn1lSMTHZXrHDvFCNwldXq45psDLjQEQqP3N\nuVOlKADoVwPAHvoR4VnWVZY6EKiaFgisc/3PNpwJNVORJBVXEGAobGTobX7u\nUrbxTQWRvw/rMAU5ms8ckuUes82t3oaxuHlzRY82U0N9YFvYeiNRqqBsIJzY\nXjlVNQp0mfsJTD/75uRgIRM32q+V/rQscdavn7kCwr1iTU8h7+msAE6tqP5y\nKqsQ69M41ulAQdzvkJ817r3ZKxS4F4h4myP8cZdIm603PIHdlLvGSEG1g2RL\nZb9XH8cWVD9cAV/9yj+3y5GzbD8ZN6qALJ5Pd1FsE0AoOEGvflUmgGKIH52G\n6qiJaay2yZVGIFlJa8Iw7CjcD3M93Xygn4+cOiGVpKik4ar4zgxWoonZj3yZ\n6QypvepH1TayQxzvV/l34z720Eo1uKKNfG+N7NOGgkAqdEmHSdnCyTxBO5sI\ntPNu57jd6dR+91t2IaLGKOlO/0v6e4z2yhUbS+N1UnG93joG6PakDt6As4DI\nBdxY\r\n=69xD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3j+gKgR1R5560iSntJ8Q37tptG7t6SeEa+CFBm4T5aAiAZwV5i5yV3yKCy7Z5VatsF30QQJtywmitRGmpWZbeUwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.7847b83a.0_1626283122848_0.3380686713257228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-checkbox","version":"0.22.0-canary.8cba18fa.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zimicygLuc97IT80LbUvcLVKy+M5r6w4PGYfu27uVd8/5p8bsG+V9bxWI54blJ2itWw+6JG/hOxb1L/T9IMNjg==","shasum":"93c84eb872926c4abfdcc514c175e08f0c799f0e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.8cba18fa.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iCCRA9TVsSAnZWagAAWkEP/j5tQOeganaNryT4oLgS\nqCcFaSvSkF5BrdU6VbQ+W8vJa4o9wzyLEGwQsGfadT85u/IjTIvs9L/2iryw\niq9UME9drGhXnZsMUPptreoAijkdDHJvd10gsI9nXDFYNmDlcq4fObS2/rOA\nqCNbbtUiHACuJ9Qbw9bCpiK2MV9irJQ4eiOdFyYpsYINTJLDfrGPzRGWJpzY\nDmRb6utY+FmFZWhJSs8eWhgUr5KmDpTN6m5Nly9y9O/jIDB28us4VxWzH5+8\nYTEdhfMQUf26HcIrbPwmivy0pw183S1QIe7vwDDvXG0x+r3/Z+UxmPgI5uel\nsVbFdofR5lqK1qbZsvB/Uzdo1cSToKo8iEVqNqXGmzpL5hMvQZDeTQWlJNe5\nrBUc6WoxGXIGHxAe4iKtQpUfTCs2wUYFIX5C9Qm8hOE8XvBzKzCvkdE0ewG+\nQDdv8tnqMGS+XrgnR6uhbTlNt6sWjYqFB4cJxU8a3CNDfGmufMbSIj9a4inQ\n2wtIhYVt4L8bTLB11Jft9hq6lQYw0zG3ZhvT1B/ODe4JjP3GOgIkHcMmKnWC\nvLnRa4s8/S0ov0vddSS8KKlHm3aSkKoGVTAeRtQLDEnImMb4yrKA8hZjn0uu\ntrurpxScm4kXWeU+h4vyQEN39+nqz/IF2Q4NiehOYQlvWK4c2zFVFmu5UiXc\ngcGm\r\n=EoFe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDZobwVT0vJ2IjYo6otQg42GigUmIrGCzd/pfapzGRGwIgCdPhWVbatHl3FJYIWUWEDvIlBqD0W+MuXOIxq0SX/rg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0-canary.8cba18fa.0_1626294401801_0.21254855108660742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-checkbox","version":"0.22.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.0","@material/mwc-ripple":"^0.22.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-XPNr7TjlvtKAZ2lTRDkTZF3FR1EXBlynigmry73lA8gBgo8NZ+zJOJaYW+7VEMuUBY/GfZuQaDWxd7jVVS4Paw==","shasum":"bd7441da2ef6174697f2d4daeb8b151ef6648d67","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.0.tgz","fileCount":15,"unpackedSize":82359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72d/CRA9TVsSAnZWagAAMr0P+gMiFLbhmwCgVuBP6w0v\n0sKmiPVyAXeqA9ib8wBT8BpQHdyYUaMEXV4T89999ULDZXpF4eWKPZVTSpm0\nIC7+JCPjeFDl7XYduKH/WGItN9wBk2yyCBzMh8gJt+1Ureg5NA5bv1/SG9UZ\nFBOIWrHawoS9kHxE8hvRZkj8n/6WtFpKZtcNEJG4+9j0C/RZ83Wlzntc6y5s\nfa+jR4NfLVhRdLCpZ6Hqb6gG/UkWRb8f37i2GiwBXATm9GYM58M9N4wFB2Sj\nfIh/mJTMiUcso7/ZuyN0a49EjyJdADSobLosJacw3tczX2VwjdnZfg9w2QUS\nyYNzsv9PKSIPpaIMiyzAPyzRnHUFUZ35WlpXy84fe1lvLbFkt/RQtdVrayxT\njPf8rZqoIPgfbb9ZSZf0MNpMSvnhASsT9BdrBTF4adk2gxQo+3m2j7Zj1a3t\nXcOlN/X85AHdpOk6LWCNQqnqW4x/83V4pUJo31y7+IhnLoW1oTHvy80ssvAY\nDoz8mHzBpEhW21tXgEhjSsrXIrrUncM2GvE1hoWB9eiqwuXAbmsoAmBAKpDb\nTeLYYjBcFTM+Y8LTDQo+3o3RZYjL+yA91wNOJJ5P87/g+Ojeh5MEo5U3OAR9\nGBL+l11Lpa43zPb//ULrrSd3LA0rk36SG7MuE+ExKtBA26zqxtlK+/oPpqvm\nXbs+\r\n=BEL4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3r17vErJtKubs4TOMPslMF82SfsyYWBBXmc3+r21beAiBi0cX2/F/3YEUEDf77doZah2NaRvDZM8zt1SCuqKZGnQ=="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.0_1626302335420_0.40872585660800587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-checkbox","version":"0.22.1","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/mwc-ripple":"^0.22.1","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-JfUEVWAos/sscPH1k9oUKhjtCbTuU4rl7GgKcenCF6EnxTaXbzxGJKPz28BUS5I14JM7vHNUwfqTC+M/87tNxg==","shasum":"a349710db458d8e8ed76a377fcdc3debe32764f1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.22.1.tgz","fileCount":15,"unpackedSize":82359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAANkAP/iMa7c/Zx+qgolgysuVi\nzcczHqP4bD2UIE5ztL3OQ/eq6DptMQg7cNJd5RTjxMjQG3CPvhhHy1uc001P\nTC8SxWGlYWY+DIhBGqcfnTdLZ3nf4+JrXaj0nj+gon82BqquCq+vkf270fyg\nKnPU9kn/CikbAaznFnmr5UE43tVADxi59fkMQMmq3ejPGT3wojeQEHzDqR0Z\nn9QcHV8rA/NRYM7XnsDeJhzJiH9ZQtcxoMD6IV7YUbTgIe0mXBeJ/7UE/kdY\nGvRCZcuQmu8rqBDmC22rHyon58OzXq/IU3c4Rn5WGAlBfloj7RENArAJ/bwH\n4+94DL3CE58FzDloo+B1pU71AR1iQ9A3X0/3cTESbLxlkdZnwPz9QsAijhAP\nywt4y/xCtvxiC990H8EFVlqzCYgsEpKVmhFOjoxMAVxpPY2oRHB5KaER5HAV\ner1Wgjos/kNsvSbbdxh5HSX1zqwCxYCR8LObbr99g5Qhs5VaraJWSRyESBOz\nrwNHqTGl7dr9CV0r/EO2v+BkWdln0st/FfFbw4Qj3A1e+go5+msRD4y5j1xO\n9tUEfomTIwgVgOA87HJzHJ9q1mOij/iOf4faFhHAG8OI7gm+NbHw1yZdyM9M\nmbB5LwZDf2HUiRH+rkq2Kcn1VV18SDQjPRThSpeUhOq6StVUtoGMolcS1zOK\n9z+t\r\n=vCO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlN2W8sSZMQC5Ze+IiAOjJR5eNmRb7MSJRUn5/GxLxUAiAyMJdPd80vREZM2WwIh6nqNnMdTKOZ4vefmL1MhyitmQ=="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.22.1_1626303172925_0.46781483308472205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JPpUsg9zp09kJeKBSzaiaumndcoXm4Gs5fMvSeRf+S5NUhgNyiuKchK0VgY1qm5hcBzsKGf+clkTjas2uSrlMg==","shasum":"05c86cf36099d9b999de439e93f1f2afc2f3984d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.fbc09b4e.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sRCRA9TVsSAnZWagAAA/oP/j2QHryl22Kp5d5teq/R\nJfGCh048iXIhBtALzBK3Sq3a25N5hDeBY/G5NBNQcRMdgzVOHgmMHMCvxID6\nLvogmaKhVf5y1AkD7uxqZqpc9beFgvEZU0XhTrOTc21C2NRkR73mqs5FgBno\nYQLU8IU9qpn4F6knPfBH3ydXMtUSqHOJBPPkfgPln5fNoF5fyRNT8VXuSdTS\n+VugO0IyNU2wgQwypnx1cEkal+vrUQNFRnG51wH+LFcUv39ktFSbR1kQAhZx\nPbO2BBP9Wwfc54w2JrM4B+FGY8Hl66vLNX9JURf9App8UumJkMUBfQ9+GGr8\nwSOWb5oCRgd3taPcn+upzW/okHQp7kUJW1Mo5ylKqlMVeYFXggpw3yxTcmvH\nJCMSTfB8tYXtvHjT5NKYQmx3A3aGbaRdms7Z52z4YDsCAMdik7WUx4SuySVB\nRHRdqvFkff8v2iaI4rBe1QX7S2Zq7UZXMOmsyjoSKTyyhUxV2xXWhrX0c1bA\nwyrow6LSwXfYuOg1y75oYqxh8cDaJx7OrCJq7a7ZBDEzProtGz82072SB7yw\nkpFp83Zu6upWyXTkvlxIwbzN1Ykmr0EZJdD46i6wHX8gX9k1nShIJUPQHUfZ\nWH90KHDFpFoxB9FPGdWjQqNvx278C0/xudwSNPP4n3c8ILCdqPGQShF9EnLf\nqVhK\r\n=mCnJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1AWRylp3/FAKRm0AApXPiVR2BnaYG3Jwwf3e63Zw5rAiEAoMTtt2AG2mIZPPMLugNiZtwIzhmvL71mtWl1Ih//aBw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.fbc09b4e.0_1626303249188_0.7622800649630777"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.73e9f83c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/uaA7C4CHGcZ+ZtpnrxnuH7L9iHf5LCvY8ssBAKXqcP+nSNZOtFsDDLr1NM+kyoq0AOU55jW1zHgr36F3epjSQ==","shasum":"2c834c5d7ac28b2edcb70595391dd48fb0fed18b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.73e9f83c.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0ICRA9TVsSAnZWagAA5AkP/Az3Y/Nb1qXCR0e4PhVe\nO9cBuERvwAr3rMfzNBHRe9dPIkB6UOChxeU/L8B2k5hxsaqVQMUepynE0UdA\nmYC++fc/EIS0LtSEne6RtI2SOYjJzVs5EfMso4htqv9yf/n2xribE2ex2c/r\n4F4fXJGJeQ6joGi8BLfzQbjK+9DnHQtYgp6ubKhczsc/p/BRuLE5sIbrv/wx\nWU/v/Cs7lev2tLcuWvtZhNt4sbfr7WWE30pn/jyBcuyBygcMGizrWBDy5M7/\nYDlHH78RnYnPowTJMQX4XNBJBQKvhbQOdy15MJ7MQrxeb+/HbeqqMEs3gbXI\nynQlDbMrdF/q5w2Tdb3FJ4zoGZ5dtNMsS1l4WRtHekp4Fk1PZsGhIbEevGb1\n7vE/+p6Htno8lZ6viV/rvnFqgCM3h5sQAcT97WCJ33Sj/zhkx9Twl1xeh2LX\nLkJI5vxmjdl8FjEQ+QX43CUshr26ITGoxr50qo8x3bZub4NQLq1VYzVGMzRY\napP7LrhUpM37XVKOTfVi316avdfj/sMtRvovc49+dwi99ILb/izdjvMKkCbr\nP07K+Doa/f7/fWPTWfZQj4LxtD7ZVOBPT/6YoGMMiPpHFcLJhXRC4kUSYroT\nxNH3lIXqUt/2JPGX01w0ZaF0JkLLDbL/WlYt/KciS55skE+6KF9rVZK3r6gr\nJzNl\r\n=KA/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBoKthShHSUEKx9eVDWD979rr+ClJovzBUxBKSZO+GVUAiBomSoABmVbV6Iu5RPZbaJKV9jrjkxWCX63CbwKs0Wbfw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.73e9f83c.0_1626381576600_0.11896369823202901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HulTzXd1ZcmLXv/iq8mv50S9IYrUtp3FGg8mQ/dFo07sCUheGEOCEBsB3DJ5js7BVjXdgCnCBuwjDwCTBymcSA==","shasum":"5c24b4f18c5dfbfd1744fba47675e8ea418e64af","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKyCRA9TVsSAnZWagAAg7IQAI2UEZE5hXrlL9HYJ8H5\nelTjaZsVEz82POxr2STyMdgKxUQ0npeU4rurDxNFx8Rw/B4moNh3JYo88K/y\n6mV8yoRY5LGe0ku3tNhou+8Eb3YMIPV67jwsSHFYYOBcq0i7tsoyQhvlV/E6\nh/cN+T/HO4L1yrwjqeiPKCg0+UEcYE30Krt0tRwL3UZLXsf45XROTv8xNzYD\n0Q/EISx6AU3y+UnL8IEJMrcGW9fEqWVu7fiYgyAdq07jnhESS3rEKeLtuLwA\nZFoP/O02ERi5o4kAXgvryGoPa2HXE/G9TqQmUsXkltb71igB47/hdHyS43us\nWOVePj8SlU2z7yc9aopQ1JPhH8G8B9xV22SYwsyszcN5xVsK996tLwoQcLqB\naVGXh3PBC88QADEoEbmaorZnRArkdJXN727dbKB9Aa8X80+/2A+w62hz7/u7\ndK7+/1dSIjKDsazpHzMoQqaKgg7/+F5LEoxasZ/Zr8sbAYxEWuOVMFcgy1TC\nfyeOCxBOSUwVGX0vDUg45eCDLDMOhg06AxrxGNewkEy/uGnYmTivaO0ztSMp\niFzF9PVb8r4Y0WdiQjpFJOpb1AZWrqpSQD2x5eoqKSntcwc1CPGK8Y4zrjqj\n61DPiBFnorEqSqvqXng/yqbP84IraZhkrKi+U3p2iS39a6A5hwZCaPU9nIZB\nALzD\r\n=/HvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSaANqaP5gvKFgh4rVk8dAOnEKEc0EbQE0FPaNcHLXZAiBT1/p+j9hJVn3nFXrTMsYNyzNy5sJP5PhYfzhPLRyzYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.cc0aa7a9.0_1626383026328_0.8448754885981478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.a8fcac45.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TmP0YLbJGNhOCk+IzdvMCBjChuBFQjOVaDSrY1VzKEOkIS4CSDlaWGc+NFbiBEdZoiOwT3Spy/orykW0+s/1fA==","shasum":"a2a6ed95c6a30d28b292ccf17e6b3fd4a971d8c4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.a8fcac45.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KciCRA9TVsSAnZWagAAOKMP+gKS/D6JUTdk+R/dDYLf\nmieclj2KDyy1PM6hXWch9UEugLMACki+LOXBojxrn5REJSvED2AILPq37Izz\nfyxeHwAlNvyDqXIfgBBxzTZ0XsoEeS/JsWD1QRyrQucXk/cWt/DUfTm9sKbq\npTMojsx3tTCmkk9ajWAOyK111yzm97upKaVIvd5tiIQO9LQtuMGfU3829Jq7\n5vNJuolYgbj5AzjOoREW9qKxZwT4+42bKdjjfSmpix/rzVejAbKmgjcM+tDR\npwljZ/zHcm1gOc6b/BQM3mBLFfLK7GegtHjE6GG9Sl8qC7ZC7lROezSiHGi/\nhr9pekwHNFor3T4QQuPcpwP9kQAQEWIHeUN5ZanVSzvv6RFdl7gJ/FwOkTBv\n5SWy20nIL2h0Mf8CD0MVWGuZ+ZhOOmU//Rx7QP50+6qsZplLGods7xmcUJzj\nMjAEEJUcDyecJnJvDmo5AEPV33ohh6S6Dk1AkqEVLFtDpX0FwKHsyG0pD2L8\nwHR/9sIYAuPCBBCRozjrs3gwA62309k+UmL3e9qCKjuZwg5TFtLS7gvf8OtI\nKH7aU7uWPwKO9fbQqdBaHbVgT4DrQSqxiBdrQT9p5AX28kvdKMBx1xosCoz8\nen4bvZLSVEVM2hpYBh25zSzGWzuNBNbc7hADgMCJ3/x8mstGmHEwvBZdOlkU\nvP2t\r\n=jH6l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBp4LuWw/eQDzCBslAPi75mvBVTs8YqBgBwKTru7fAGfAiEA5xbezm+2otsALDVnINpq3XqZbbGIjV/+9ZbM9Hguflk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.a8fcac45.0_1626384162392_0.28059716143922175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.3ca580d1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2kjuE3mTrdJsyhI3SLVbhm7enQm5TTDDVGLy6pN0xigSBmc6RXHlNLH+UccmGcVdJFkEWs3E6T2Q75tqjj5dCA==","shasum":"9722a5438d9862b426efcd8835cdf511858edd40","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.3ca580d1.0.tgz","fileCount":15,"unpackedSize":82411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDWCRA9TVsSAnZWagAAW3EQAJ8nneXOdjLMtGTYHWfo\nziZupopGxksl5otXrz0e+IDNI9fVkRXOBJuUw2Lb8F/8L/UlgLSfA/2vFgkY\nkzRf97P0A9sAQa66x9o/pOWXHPahjM6BuT+DJzIPaHMEejkHpg/BWuCj754Y\nen1AjdMLywd2+jDawM8GMcksx5MrUVGCZwIIrImsd7rhENeUYxl1adG52Wai\nz8nEPxHfDPgfe3Ca1NqdbuHifn7pFRmv19LrDBxOGCm2vC9l4JCcdwa5AqcP\nxITuuL6APCV2EJA9iKFuL3pq1wLzUI5UFA4T6CB9FiiVO807WRLCWjYEQ/Zg\njkbxEKWa4JuWpGWWiaMBF8y5yj2gsrAzS5HdQqsERBNi6N0XbMpO9q1ytHT7\nUdBX6Smc/2xjE1TST9eHN/e8if/VGUlYWRjep3rDFWJZyNxCk7n+WZ9d9vMD\n6lTSvHBxqCmwjarZTsEcr4MEwhmk9WLJehJfFhgMSkBhpRU17PCAFg5UTtKd\nBlGLP+ts7ShZc/oneYJVJKVkWTdQlbgebZ8m/V1ImWdjfFTqCHkOlOfxNFKv\nENCfnkr1j0Ei3vYIAUrwJ9Pyb2L56umlPNCAR/Tm1OZTviEiNa/eP+2WqevX\nYCRyLFkZWDar53h5uzugDEhRi6Xy47KE755EiwRPn3ooPG89U6JhX+Mf7LdR\nyaE4\r\n=s6Ch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGx6jr7MGaMa7d/bW+NzUeQzM6P7AYKICYAMRtLXlwWKAiEAvMzm1jj+bqXaCVwapT7X5nhYhxA5rk/+cRFG21jfUZ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.3ca580d1.0_1626386646749_0.9449645646845461"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/touch-target":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kA7gcBdEvS0AMaH4jEBBWlBfSN+6UkKK6IOnSSfcS85FVDrrhwvyUbDVMdR065ichL35KxQJ7oylnQXN63PPdQ==","shasum":"10251f70e4e0fcbbbf892cd81c0ba587a1ee41e8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.9e41cb2e.0.tgz","fileCount":15,"unpackedSize":82951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MADCRA9TVsSAnZWagAApskP/0KJSL5Vu5jMXL/+J8MW\nQEprT10NeeR27R/9E6S6h9KPEmovvITWhgluHoVMKGwPCvb+Qj4oUfiWMny7\n7GqXvkN+IiLGYTm2sajR9LGYI0Thv/WAMRBVsfSVmu62tUCEGceJnWscl8Ut\nGPg0d5+N7pSYj4qlRVg/0XxXOLYoYM43dRkY4KLKo6UiskyVPrumwXMBfv0i\nVzeL+M3BmE7DaBg/10My34EAKF//lYk6vASCadZGgvLlF7KqbOfCgV2JPLmQ\njbY54G8TUbSTiE/QXlDch+DMoCGA9wh37PN32moNGt+P+h+pry+iW84IQ8zR\nEW+TIaFPuP+XC3NoUxjYuv4puQb2q7jex5BEmftmv4S8ytPaw5mmvzWrBy1l\n+HSTjMW763wXSBQ5u1vhS+IJkiOya6zZh1E5UB+GIK06kdEH4R8jRYhtXzM7\ngXwtj4ASKMbw8vT2LflChO9kRHvHFDQicLWypDTu17EkGPp0sDeyklA8mbg9\n/WlM8Z5YaBJ1+huMs4yzTVgWaTN7UGlCYWTY9pw39swYQjX6gJBWCyDAzlYx\nP+IpEXsGiPYR1hZbDKU4heeguJ0gQP7hym537keobDemuIhr2pRbEVIgdmur\nprfFMr3Sm3dr0IN4Vcxoq6vauYyRfdak7Pa7RjhXx3nE4PYCc2K4N1x+K8ej\nxzyi\r\n=eSzu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/haLBQzAFEI8r8+TRLfZ3iZs94GX/6ASDB2srMHbc7wIhAILd8JxzDT36xWpqDj17y1jQGv8C3aWE06NR1svuqzoa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.9e41cb2e.0_1626390531742_0.954778816003722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.c180db74.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-ripple":"0.23.0-canary.c180db74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/touch-target":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EZ6bmP+eb5eMbrI0NfVcbrrSC0nfE+C6KVDS6RFJowTwAnHXpp7liCy7hPUb1RFq8P/TBGRTA7/7glxfNR5jTQ==","shasum":"c74b3aa574681fc5afbbf7f40ca456edb07e39bd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.c180db74.0.tgz","fileCount":15,"unpackedSize":82951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDuCRA9TVsSAnZWagAAIEwP/1NQoQSGKUzvRgai2D+O\nvDYkP9MpivtGP9KKAenBsN/Sfje5eAjJr+3FuSi6RyLBCV6fqOexiY4QxcBB\nXgJJDlpbew0joqkpBnSEu6O2ki/Gq3Sogg6hihUYc23zo6I7w32Y8EgQb3hW\nl1874d/exTG0TtMTlxlbKB9dCP7DDDY1e9sb4URqq1amE0/UqgaaPr7oM6/X\nl5ZyyExw7oJ3thAvfp8+BOSlf04ozqhSY/a7xxP9J4HVFErdR4UEz05Y6/dT\nPe7MDaxnMszOlqoEvxKHb8L2dfE6MKLnolQCEXHiIpb/U82EJbpVrJvN5Q62\n4bx8AKvb/gPkNo+hU+ymgb2KIBSROH56mejoEPWGjckoilmhyv7yCp9V+BmJ\n4rQ2OfCzhGwQNaOgMd3T4p+x6ECVvFz/Guypmf05h2akFHh+0tFTw0XQQKyB\n0v0tGo3/MaGj8yTSh8N+DypTkW0Q+ldr9m871FUBIrdWKhlOfUAlkYsBtM/S\nrvNeNfUsJTNcw5B/TRmzWgJB6aDLl1ktWPtWskj/I85dXdbjU6zfWX11t9DY\nd7/72ISL8fyyloJ5/KUCOc00PpRbweDkiZLW3mCBYZvu1ZglQCxDY0KbyAHI\nJspOS4Qcns/8iHj337Bg8X3AOy3QJV5PwH6QJvgI+FSzN3eJBb/J1BIwRaSB\ncXj8\r\n=d0O4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnmG1RHv2s/9bsc2F5gL4/IWlM7Ulez87TKPvx+Lk7fAIgTJpWBbY1YIsLydctNvwU4WZQZatJaml5K6fH0wn9Wzs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.c180db74.0_1626456302678_0.7492539156489053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.0d0a9267.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/touch-target":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tUCsxzuj15qMidYHPQ437gLbLMDq9D4ze2YUrLqwIiF5Ghz93MH8sXVg4kNwBvmfP+k8j1Qg1/hfPsc62n6c6Q==","shasum":"37fe2f819fd466140c5483beb4fdc06c391ef08c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.0d0a9267.0.tgz","fileCount":15,"unpackedSize":82951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ch+CRA9TVsSAnZWagAApUoP/RLIOGXF0AtD7QACWzwT\na1qakUBrUFMc2Pk4ai2Ur9Lm+M7/AvBCnbLgMARVtdShStMUhYdrDAMtp58B\nwmAlgOhAuMf9k6SkDvk5GPxyd0UseRqMOE/MDUyrC9jmRPFzeVvvv/ZIFJn6\nsCj6zcULg4aHenLr9+zAtWz51s6s66tGQbbytUnG5ieyD70mleEXHBxgTzQx\nI/H7XCRb4XvxptwwY7uWONmXYZI5Jp5OhKvWyFzNwq8e7fzX9TD3YzrYptVA\n+HpZQnPEFWWRI2ajjjH3+QFsMk+SREeAy1CZUnZpYxNT7z/3ZLD+iqGuGodG\nd/MWlSaeVS9QIUIPgzgbnadAW1TDR0hrE5c5Wnva8O2c9Hkq9FuYWHI7TQ48\nrA4iKwyDqE5fuHeVwTbThKfqnhxAasSIKkqsF+pxJCBpX0k3PEdZ3qK5xeKV\n53+NMRRLhgBpPJyzMXNse/+1UUfGZY5W/ot1V/IHid5pkbgeLAvn9ZxBp2/t\nomGsitXqNFYVS7HZsl9l9vAVSI32GOThWCzo7UsC6lwecHMNQAV8kjd2s/ai\nbVWXJxUUNOrr8Ekns2MhobYkzUObRGskQ1fUQ4xbFGNvdiZFOicSNUQx0VT3\niqqic03KQ2XoGndZ5XCRQqRje84hJDCjVBvX2TDsdiWVeKf1qnhNCV4Emkdr\nNdIS\r\n=eam2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECucAAUpeXi4BEdgLsCcVxU1MpeY8kOYgKXU+1nBtIbAiEAzMNy4bYo2dA6nqmsv8Qn6/litKgq/i1Hm8I7R4HpQXc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.0d0a9267.0_1626458238552_0.4698707220804854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.d234ec3f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/touch-target":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Az6GYQevPbHoFw5Cqco9mnpse8yQP/tncAsMhFIa1/4+zlJzsO1aG80Ev0GR0TeJ3S+eT/nNibBM4Q06xJ0gyQ==","shasum":"1f450ecada1120bad89babf964f36b79900d337c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.d234ec3f.0.tgz","fileCount":15,"unpackedSize":82951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cr3CRA9TVsSAnZWagAAU4kP/0ylaLYjh1iVu1f00MW/\nzgCJKLaUdbfftTExu2soozcnF5IHoHfDbPyr7QkZaphm6mFpjr0CEBjABu+m\nwy2c5F6XuOSLKInaBV/dTjVh3f1lY+g/WlFGUiLub2n63i1vn7xyteVOimw5\n1uBFjg4GvwkMPENcJbz1vauDNguySXRPL5HYlZRR1Be1/TWeEAivGmfSu4Go\nrkCEbuam7WPoW+kmz3VLsURAa/u9bs/teUOtB9ipyYeMNYu/vRDqUxR0juIy\n4JobZKnvr7TsHRQJwAfuF9PjPECzGUskh9OZYR0by2eHnQAQOokVYoXyd9tG\nIGwgiryur8It/pfApZ3CtSLeArR9wYjxUgNpkTp2Szyod+cWB3Uu9apiZB+O\nZm4i8iH4IKcaVEr0usQmbk9uipdjyFhH9grN8TRRg4M7ch4c3ESKiLMiZeO/\nlS8ETV/P8hq1fhGHLLyjbXS4Zav3B2YVmQKM5ji4a/BbcmsZ3pvanUID4kj2\nBAlomtL/2BG/7eOOGhMUxszE32idECZZKCPE/M/OggcKgMscmtLE3XNRssYh\n7ri6aIaftmI6ZOMpMNrXPr4XZkHUT1IS4OSH6JNRxxXBzkhfMw2cTqyAXty1\nJUpIEimj3DBJMaHY3gShmS1vjVlh01AkECSclsppjEAcIjWRzRo995C0lRkG\nJxhY\r\n=mQpb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOdaheLl9pLxSjuHQbwN/gDj0G+F3Xh0+i/Vz37UqWmwIhAJqyT3DJ1psLDJnKgiXOlEZsTENU2hcV2raSZ3/exWQw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.d234ec3f.0_1626458871340_0.22917713053131727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/touch-target":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Vc1qgjq5Ay5hPWC5Th02FFLt2th+3BKzMcF6Y6ryNpJQNfzZg2zzrwHU0NtYnRBmyzAdv+d+G+QMhBVa/8nyxA==","shasum":"137008c4f0e912cce2357a14f3a3829f3640b7cc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":15,"unpackedSize":82951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYrCRA9TVsSAnZWagAAJzgQAIcof2YJzAgcSzflHAcd\n+HLUDPF+6ztFavHU7aNOgBR26WjsLGKMYMvnfj9/YxeOIscj+mjCKi3uq0AN\nK8QRCkV5BuO2R4gOvDxFyverInbnPcHQiu0D/m0Gumpvf/kwL+GioXQbr0ED\nxbsC3W94N1aEBhCxaPLvr10tc+ZhJPQ8p0dQCGucwQx+HLVInF+TfLEr1tmQ\n6kHGqFyhZR4b1CN0Q2gH79L/YAdYLroTl1ZFC//zuBaYKQ6TQ0K9ThQrqtO7\n9y1s8iXLjxe6lLOGBHg3aBPC/n1S8nB9t4xw7I+Z82uT4uv0mfzfqjqG7St4\nJR1EgXQcnMLwhMZYhp0Cmkqou46qzN83DigUlYMliUrQCL47Fpu6IMrw7i3L\n81RYHCwjocHJCwQd7bfl4H1mViRp+0aOSDP+a2aMM0S4QWgZOC6lCeG15WDA\ndlCxmFtCv37IgSbKLvE/GrCSHfXzgSR9eKBLEhMTaCkt2gzTO5ygXjTly0o+\nf1x7G2VJLfy9hsMNn1K2PrzcBgn8oYJLh4KnRpHh0kYt8On6f2WLQ3hjgxqX\nt3924NcwP77ftIQOa7ma/Yub4xPeXsHXsrSSmy23g7YgruOKSEYZDPA6M1l1\n1z4nNOTFt6ZB4BiSvPyjEGN/yrSx67u2GGrStYZz1DcWSON9kGHYq7/tLOqw\nvnO3\r\n=jQav\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVCzyVQYccgFDb5cYt4pyh1RCoVv2xYXHi0GFkeXVvzAiEA8QXEA1NcsuIax2X9N5+TXQBIVwi8ji7VcB7FeVn0upE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.5cd4bcdb.0_1626469930858_0.8770237045077265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.2b133cb2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/touch-target":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KLXBVH4lwpbpYkkvTT1/AyxyCIeduoLytvGU7IYcHoBZktzVLy657j9MDyq0d1IdFvjQ4LAuQhzt3TF3zTkEHQ==","shasum":"cc322f532fc312abfaa4d6ffdfc33f4614a37f2d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.2b133cb2.0.tgz","fileCount":15,"unpackedSize":82951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLxCRA9TVsSAnZWagAAr4YP/16vo147WVVmJ8UVdg9F\nrMSp53x6hw2j5Vec7/wLgzXCPRWh0WEi7C6tR3/H5MO+5T+Juglu0Tx5veDa\n5o9tJ9UN8PQ2U3crVL3EV1YYhBbtgpdTq3Ci/GwloMbMq0DknGiYsrvcjRmE\nV3TazEouEfdehZUNJzXxVTmbxQWS2t4y2bVVZ4Xv4hx+mH5f35usx2tT1x03\nhdRVk2FYPUPS2eXkLyrLryZoVWyd6ZYA445+bAULFxi/nJD/dVT9YUgF0IV9\n/KNVR+10rxpQRxCn7qp+4l1XSdHfqtTLMx9Ty7f0LHnGgBL6ZZyQJMcX5WbZ\nPA2SUMLvDcimh+8Vh0gcmTiEK4gOcw2gUspaTyTG+kFcUSe8FHuAs4ccvm4s\nKuF/brtWls5hRHoCAe2VyJ+nDYnX1KIeSJW0EwE5x7CVP/Yczc6mEgEVMQ30\nygXbWTcbIPLO9I2+IKO0FLD1t/9fDe/hcdc82jAlxMFiAXMb9nke7+j60re9\nY2PxFv26mYW5ci/tPkvGxnrxgrvJEkXr6rn55fJgAXFk4y7NZhr4qG+LNd6Y\nS8H4nv+BAFelaKtHetf6lOJbfwZy+DVTAG4957aSekJ+VJn1LSFtWBZi4ev/\n1Xk9INUm346TfU5KEvnkVBoQSL0NDPcqCVDyke8JTInu+d1qCJJk6Vlv/31C\nNdLX\r\n=ULBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFDgTbkXXkv6AtXWjGlr4nZuLHLdO1wUy1JecsJIyb4AiAzRA9deMa7ryChYaYT+OKu3/InOJk376L4uQlQ0hvtkg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.2b133cb2.0_1626473201017_0.14918001932145475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.ae4f422b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/touch-target":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0+Lfjlf5OEum8BEaDaZ0E7iC4PdHf4XvYDTm0nsUMSFTEj5Jo1Yx61vGKdbFvxiKo/wfTSUwYIS1S4/Kg674vQ==","shasum":"2a7efab0b667f35cd98a3f409ddd046a7fbe622a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.ae4f422b.0.tgz","fileCount":15,"unpackedSize":83495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwiCRA9TVsSAnZWagAAx2AP/j/EtJw4QH0GKYX43vvR\nVuggTPFzRp/cwpNZvO9lNn5rLQ9oo2Mbix3LiSKxta3xrygLef1eHj/eAMya\npYvM6kttXaReLVTKgUGufPPfH9PRnJ5V+GjQKc0OUa21UHD8wGPl8vdHLVjb\nEEbxwto7E9+t6RmVinXeLE2+OXX4HAj9nrGwjPQzSM6FWc4hr55a1HZYfBsP\n0V6cfBiPVt+I7A11BOXxtNBq/pCVFeIRUe/88BCmSaV830UIpJnShclJFnho\ngpGi8bHKvNzn0Wz9rjM/YxrFudLiC/loV5vkqp01luSRG3D5R3xg0qMrcEvn\nzOFC/bzPCgy5kjflMxxSWQAIGZT5571fW4IiTYEOFD8O4AUGIHXOvZCn/BAP\nNE24d6aNH2CSSaVntJjK2+tb4GPc7u1BQQrNKkAeK8Z2IR/MV2fSqyhP/iB2\njNroCiEElSF7gnoS6xP7QKpnUY69lR6gm8h2QhCKDbBxO66jAvqUaAI67Qev\n0hgIzHpCmwN5OQKKcSdE5yz3yB+Qpy1RPEkenC5ZHUNXo3IQ+fG//6eAGyl4\nmJ2CJxOYwennzpwpWDTTNxJLalYPBl1xR5p9ba8uSlg5DPBlamHnYQtITZR/\ndc7DYA9/zQvS/JZbaGTSbirLjn3OHRzPNwzlZYXDE4wgmRP9fa0/uZ3godF+\nZ21T\r\n=2CKy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCA6cLoTDJvd/iy31x7XxkZ7B8L1PZvrg0OOvrxnlfyHgIhAK7cCnMUAmpg+xMAKreU3DHV0e3yEQX/XHmtFc/lkE7q"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.ae4f422b.0_1626479650300_0.6790633755229767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.90ff8057.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-ripple":"0.23.0-canary.90ff8057.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/touch-target":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-REwhQq8295eOr7/V/CWEQVxe0fC56L0UDnCWa8kVsXIODPXK7lx8r3V1LQE8TrbScj2Jmj0cviu3WSUPCY1v6g==","shasum":"affd5d5e3b348f5fe3ad2aa92b64259140db2c93","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.90ff8057.0.tgz","fileCount":15,"unpackedSize":83495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcwCRA9TVsSAnZWagAAdAoP/3cBExePPj85PLTNcXA2\n4YH30b+gzDG+jXvfUJXl9Rab5MaWjRsEAPGj19IfUTgy3FjM4Ce/wGWLlqHq\nq3YFgqDyRyTg4RElJePtKEDhmAxNAxglB4LouQRiwJTCxsaU0FXLX+IoHObN\nrofa9B7C17VcVmXFQi5taIIS329RP+KWA4ki9Ba1ksP6MpUhRfG8+2Vis4uJ\nbWRn9Lrto8LdnHx5EBQ2xnM0ktpidrW3QP9ZVLpnHDLEyPzvTMtP4l4TL9cg\nY8O9H9YyIcmYvQGBS7ocp6T2DjU+l9W5SC8zTZy9kErd2RhkGiw71saUaIGG\nC8KxiHcI6HR4U+pLZV4larLaQQYQXH5Igb622c9d9kC9cF+jFeS7sHhnFrcf\nOOKJOR3aBGKa8wwefuDI0Y9brLUgqG1nH897yIXkzgSv7cIXzpajYmF6aulB\nJ1OcTms1WlvSqWieTZQKdy5T9649QpW40+FZBp5LaRXZun6ILPH0NugizyJ9\nAHWeEsEzCNcA3v/xZfMpuFjnG1ilxlvf0/qYlbe6L8hbX4r10les+CnU9RkK\nIMresdbdyFjO8HWq8xQdHOSrgEaCjr7HJFHxUw2fQR5xC3ClGLCc7SywEXyC\n2bYLaD7hA7QMhYD23noceFn7zpAn2PYuY9CQGBccvxRBjxf7cGjKZO+1CT+D\nM22S\r\n=HxqM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzbP4DrNqBB0ckP772QEeDifSyQ+ZkFtZqcdln54ScSAiEA+QbwezPTqAAg+u1XeeAgByWV5m4EVe5g5vp0eUMJ64w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.90ff8057.0_1626703664097_0.5306936763877346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/touch-target":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PzbUjGsILCSSwSkTBJN1nBDOppjxeeemotp2qnhgqQVPnUJfqDFXwSoMBSiSWxoBHHwIz3IvVU6SU3AM9Trekg==","shasum":"67921583310367abcd68436f1a2037fe974b871c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.dd7b75d1.0.tgz","fileCount":15,"unpackedSize":83495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bt4CRA9TVsSAnZWagAAxRQQAITBBDU4cTmC3Ju4Eg8K\nMGqUnnPiT9kq3jiw00ot6kVBtCKCzDJiyN2QIa9BaY09Fa6Qm0uppYYHFmYD\npj2LsegSY964949XciuTB83q0OAM94v+2h9QvS3J4qglBykqQqwo7l3GzPFr\nHjH71YMd+YiUWFykGH0YtnGjSed/L4E26dwMmY1W8a6I7QN9PjfwcwpgW2Kn\n1Cr+WlsvLqs1X6g6BUbxAsSQKU+cO/5N0zAqteXvSpUYEEi7ao0nXq5wz2uQ\nUcIUSNQt4HWMAE4lKfqbHGooEurd/6vLGNLkA7Csz6ODb+1pNb8vCs8Fb5qB\nizmpehTDdEzOCVG3qnR3OkQSy2+Gb45vFklNNf309KHG8zc8XvAbuyj/ZzLs\n/3EvwqGq+uJBKl82LM0x6PDRezDRQeBKXZHWqeRCwP9x7qwkXmEzVSlCSvG6\nfJKIfO6cJNDjiI1VE9jxpwqJWrbGhYZ8W8ZxmjF6h429dWxlJJCPjW/bxNRW\nk/e0FJerP45sYJ+YwgU4rkvIWSouhgNXV/96ZGEEwe6EOGKsfaCMGpGe93gj\nMXLrq1GoWiB9b6Ke8e1jcQ9/8fBTW4Ucv7khRXpWBH2aGwqhejQzdeeZp92a\nsHWttK3ce7K7suFv6yDg+JWndPq+7ZfMe0j62ueB20ZOD7+lJYPaL7/keGRL\nWV5w\r\n=GR6O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFE6i2y80Oj/glLHSbNq5pSe/+Yf3oQeDUl+Q/VnCnDNAiEAuBinzOJFnLyHcU4DXNn+XGSEnahf78wgXEzO3HUCElc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.dd7b75d1.0_1626717048453_0.42556838458294566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.104debd5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-ripple":"0.23.0-canary.104debd5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","@material/touch-target":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7LwXdSIKRDfmE6OS7lC5b2LS3Kmh7DT1I+zUd9dHm+qIXQZI4WFQl0EzWxNn9VSzstxkil6ApkBSe5+UiXRVOw==","shasum":"b9eae8a3688c55fb87a7c3def6bf162ac9ab6617","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.104debd5.0.tgz","fileCount":15,"unpackedSize":83495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJzCRA9TVsSAnZWagAAFYAP/1J4fZJlIgI2i1Dkvjrm\nCvEAaIZjrzl1sIu1nvu9Entg+EKEnia55Oq7CZ6QOm+pAE+hcTrIhXfAYJvT\n0GqJvlG2BBiyEDIPwtSpaF0StL7WEBwFtWxb/m0aZ4PhM0kVKlcNB7ndqywZ\nPc9Nh4jrO49o4hD/7fpMgzx6OK3RhEG+6Wype0GF8Ko5gz9fRD4Oj3+IwxSV\nubObwFpTQYi5vHh47y5O1k7N/jfEdHyP4HDCmPeq8XUcId59O/PxkGTa9BfB\nTf/0Ow/7G/9X1Qt1xdRpJQDSThx7U4ao5vlzoS6RrtSD9uZCJ+BCVGdoMsxc\nh6poRLttlndwk+VxTWtxWlzXso25wTAN7p6M3SZQDQKgUuwbKon3uKUwgkJQ\n5fk+lmIQxYiqBshOPusozqt3idXjb4k30zORWizs/FgjYMx4A+3aRhthWLI2\nf9MCoXy9f2tEJNovKbDsBysYRHorUv2XOPsfUy3z7dWabBj2TNiYs/5kiw6t\nIYU5NKm6ta/e29VU6k1mM94BNAqKO0G1/kWlGz6B92SaPhvj1iOmBNZcfZpQ\npkcjCiqGkYJTgNRAjTHbISAJfQgd49G/wE26AkNTSgvI7U1o65Y4B7OfoVw+\nqU92BXi3Hd73vr3//bAt+sCVx8u84o7+S5csfmhs4aO85EfLgzehohaPRCbv\netK2\r\n=PGxR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9VgbYSXKlaVNmIYLneyQbPsS0Qj+yJ0+AeM7rEHcTmgIhANnmhmhLlMZgSOnzM6Ow5rZXduo4ctBXkYcFXN3DSt4b"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.104debd5.0_1626735219555_0.9073865354295909"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.4612705d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-ripple":"0.23.0-canary.4612705d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","@material/touch-target":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9kH2037bMIyurdlUqpfiTuk0z67uGMXevmfkB9rbLmL0mgm3r8NYS8KcdCSpUHUre/LEGde3zNVSFfO1ycW3GA==","shasum":"606e689e2c42cd26eb349a3c20775e206d58df63","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.4612705d.0.tgz","fileCount":15,"unpackedSize":83495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQaCRA9TVsSAnZWagAAAiAP/R2e3p40LpTXQNsTdGiP\nWXVywfFUmDHmrd3kfy8ZSMPUaEAGN3aF8+LDKvZ9Tmy+J/VRbImrZkxa+7fw\nl+FB4PmiktLgFaDn4DmLfND2Jpgx1xMx32SvUMuU0GdCkucnUIWIKohDoxwz\nYoNbwxLM/3pDPu9GLfUEiPdr5S2yLRLJrmXCF3nF9T9ddmVTiNGGAPVyfu7y\nlyVeNRCjBhVGzAV9Bkd6QB1TZlkwFw+zOEnXrTBBH1E76y2MGUIRAsHWjhEx\nLiMEw03KwrbeXLdEV/2KtF8RcC7MLXeLolwQfzWrSaHgxEMgSpTrMbQ0Qvtq\nOMCij/P8GnNLIUC+EkdkgSifGbKqICTukcPf//vj8rcPDckwvDDRG0asq7PC\nA5Ko7qdETNMlCuyZevT4VR2HeoOC4QI2+OpBg1/ymHbqIvpBgt4uoUcoVBZG\n3MqCo2Cn3ckckWJfvhu23NOpIw7j1GQ8R1HPdO54ePqXwOCom8TkSBIetQR0\nQotEVNELlPCpThvpQjYyTQCLjucsQa5fhpkdAxWNYO7pkmRBT0FPVgrzkH/K\nqA4+yrTxx6W6TEK5BGBGiLNn+hXK6kguQ99m00+iymFx4OUdwZKfYGCRF8/c\nUGwuDtU+uY6rfOn8BH6wymVCwMc0DUxOHx0O1eAcDU8WwZZjPXyrqA+5KWTd\nYJPg\r\n=4bLQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/offPqXTa2rOftb2kxmiXyfhfvhDPtw1LYExbmIT84QIgPq8bXlCvNL1m1AtF+fCFo2uA8+O2eUJri4yhUlRpIGk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.4612705d.0_1626797082245_0.04407482798422713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.b36502a2.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-ripple":"0.23.0-canary.b36502a2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","@material/touch-target":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/xqfnLf7yRe63/DLwB2Mvc5q0cIbuu+8lTGuSSkG46EuSnqImTrdTxWpNkfZGNqiyWvrCiDv/4IbMlKFA20IZw==","shasum":"3697171888c3f89409882b654b074be6646f8836","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.b36502a2.0.tgz","fileCount":15,"unpackedSize":83495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEBCRA9TVsSAnZWagAAQjkQAJymdwmyL5beOFc7CMSg\nwWKgYDLrUNEKRFiOBXpgQHHjx5KHsm7lMSaxBptPBCQ4U5r11lSBrAF3pESs\ndYoZiedweRim7vkej5kXjD+GE5jck7X8zpTe2FmywxA1K/vcFsjwKYw7ro2h\n3HUobm22Qg3fByIFJbZuNwckfNLZQrTVXA3NdUXuo9rZ0n91Z+0cD3FV0Xwt\n3Tz68kuHlcO9C47kpIVkETYSCjFYAPcQP6/Pl52MwRW7hcGlgJ11CJGiG2wU\nIdCII7nuIEq+O3bswCC9yCONRFzcD/TK9TBmbHACvIbP349Bc45qH3TKiRKh\nXGxoQi587x6q7cW0HNj3TFlkvGu/k5WmVmF45VO75tkH3LWl/QVEhTW5tl4p\nMkJs5PL1+7ufK6A6SbSmYUDhrusjMBOFIZizhMoKtHXXQ4XH34qKP5FYqp4m\ndyAd9B7Hmt8R19j44drY1Mia71728b7XZ7OisH/7OW/FCxXPlpoS9y0AS1G8\nUhENJhSa6GSnajxD5WME2j4HCYv91QDcKpqJHEbIiD7JFbyb0qYCjJxGIIMW\nACq7mGA3YBknwFh54GKEk6+Iljz8jpTmiFtJBNPZpan9+YHk07cNoXI2gdYx\nzlIDFyRVRhlF0uvqI8axc0r4e/FqSeP+wIXqf7kUk76oWnKhlcTdZ958k/Ro\nB7PB\r\n=vwOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClzySrtcYGItzS1IpBrQrV6sAvZWsKmjIB+UvO0UAaHAIhAIaBc29k/+hEEuEIhdU8DjRhapRjPlI17IpEcyeADlY7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.b36502a2.0_1626906881436_0.24559346412344096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.2c392ab3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","@material/touch-target":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i/K+DFXaTWY3HHkkVS33MtgOoA4LEvin8p9ZlpaGOIJ/r4zyrub7lPRrHCROQlUz761irnJapgfcQ9f8A70Hdg==","shasum":"b89e62ee1585625c4e9ce23f4b55e0cc40a33f6c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.2c392ab3.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZNCRA9TVsSAnZWagAAhykP/i1mSK8JmKFVYwQToEOs\n4Jj5rrJ84HZRxSIsgEt2/oNm6iC+t1AWfcJG1stcvBOONBUTGPrCROfCfunC\nBhXTJopRe6bfG2YDaYghhwAuLyogJmYBe+8IRcgnR2spQyrBK3LBngL6u9BJ\nteGDFYEj9cD230XVdXrJa9jLe/8v0k3T4cPHnUBZhP+alCK48bxa1f9cm7K/\nrt2dojEOJGbk1/fMRWkOGNFFCkM+L8WLxm6p4XdemiOupkzehaZk3I+CmXmB\npXwP4hm1ftMJ4fqAS9fLIrfHpMEDBOMrqFXDyHXZ8T4JpyALyxTTlywDSe+f\nAHxXEVVHm4PLmtfUmtq389C43EMvh6DE1grubWIo28XGW8M9M62yB501Isvw\npcmoV6qLqbBbRen2FKAMVKhH6/yosyFinzyU6gs11OnX2X6w62WrNaPnLZmi\nfEwC5xypKTTM4ro5Q2+tTIDhmmFmNFbiLb2D4T4vL2TF0TbR8J+THUl3YUmn\nVIRRjzRoqbbMSA9F+90kwOkK4D1U2g3HTpzz1LVwU5eEakMLOR4GGqdbKqrM\n+K9UkpM/hKbNWqGlOzU0ZpuAxDiF21UZFru0UnxcJjEl3nfwd3/OctXfg2Dn\nw1Tl3E3A+c/5uJPEpKC6pTBmby9qcuciSor8XcMMjdotBsAYAD2K1EYCZtin\nreii\r\n=p3Wt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhyWiswBQnGKbUTufL5cVmb0Pk+Uwtga1HRAxkD2klgAiEAitDNAC7PPe8W3Mlauq/FTvIh5n7wYULVt38oXhGE2nw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.2c392ab3.0_1626965581032_0.962758782205797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.e8bac95a.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0","@material/touch-target":"=12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EP/Dt20Q6J5n3L4zv3+uFVz4JqksfBCUPMu/im4MZ3Eb45m+OZHfA/UawsIMRUSzn7koSPeLYO/GLvZW4ARTYw==","shasum":"7aafa3a84dc3b3d5cf4cc31fee72a3538e0a95f9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.e8bac95a.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6KCRA9TVsSAnZWagAA544P/1KxFVQVgtC5PxRcsQjY\nzyHn2CpmZxy7Wv6A2mS5ss2BftVLGuDSRcBns3fObx/vbGS+vZrcK3DV4wuh\ngjcITpQrEmEcq+2qOSwo0+u7uQd2AcmbtHOci00lX1DHONle0GH2J7B+9C5C\nV6qVpQMKi+X7Eatlrkn6xTpKEeAZs0jb46ztu9ebW+rrGYg7SSzd3nhLRuOV\nuAxjfiyl1/dheOAJtHCnstCXLsrw1VaWkO7mdCh/AdXB3CnA6PhctofQv0hq\nDyQnVKZMSRS9yuAGmr9Sl8PIK+sRPAPdh82rV7mj9rcxsBihOClIbvEhLY8D\n5jmiGUxZtusPBZaqvam8vXZvdPBA5426sW9iPJV0qEf5L2L2PaZEQSxjWxO8\nDEyCGkMoca7Uwaylktply9EBRMwFuOk7QihaNLGobIakSZh3gkwXje0SirNh\nzO9SYiSKkR78KIMMe769hce2GqyKFuSULuEmbpJlNqN0jgDyMh9DYfGh8alD\nmUhnccFs6o+j98ZgICaUYGoH5ayGkL9VZYN01lcEpKrmBXvWZeoVTb8ylxyz\nA/baQ1YXoL/j7EzmQQXX4SND6cdKyj9se7PJ7UkSTW3cZnqchJg/hTgVWAAz\n7UhEWdvbOaaPup9CYaEbh9rhsLEaxH1V5tE9pAUojxjnHLSYsZrR+VeX/HFT\nfuCU\r\n=cBjh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrhZEZTenmketmRWz/0J4mpqinFwXBcQ1PhTcn/aG1VAiEA2cGs3+OuoGtpEqlHe839iBovuguiyEZ1drnRItbNebg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.e8bac95a.0_1626979978197_0.15995274791327274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.38f29f8f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/touch-target":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RthSssrr4xaEVnNFpaA3UE7nnZj/gTGy0Lzao/oWObpGz9oDBXxi51nhfRXOaPNRpfrSNogL/DABQZXQVWwGTA==","shasum":"673c04c517848b7136429a7666e94438e534737f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.38f29f8f.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdoCRA9TVsSAnZWagAAm1cP/1CjIKYhiU8ZUfcimxGx\njrhJHtgCWMpHy1uuQX2tOfBspLFd0h/DFjWWgQJQJ8j/4Im3JF+CTKB2Kafr\nSsK6XOEcZ/gksIxCu1MjFZ5wnu3HPOwUjqOZI1Q1c9GwAFl6vmPIremPjORe\nWNLX/24Xx1eNv1E4KSsxl9UnxCLF54I96BnvbeAyhYA24KZbxe9k6x7nrkcl\nRhF6i/VAwqQ5dH3HbTTiIkB0WdCrm0Q8eKXX4wuXOTs8pOLSCjlwie1CqUQD\nuaMblogT3eO6nnQ/5DxYUY6M6k2gsNN5OgXWtYSj6O2ZSg07gwcYjgudyDOe\n6A0tSZE9YWOYXBHbCR5nlR0UzdVyR9Lb25kumv/IyL7jarTszNH4+1hHvv9j\nS17fd6aNXYv4xjOO5aeWXdROAOzle441KqvAbSGXtLrjwEe1JUMuYRm/sPVf\n8yWt4w//eNo1+tJYxoZvNNTAXkGl8Yo2KVQoERNJjzY/paGxA+UvoJQmMogy\nGJSaDflzHHZxevubvKfQ4IgZZLecnIl18x4Fu5KUy3mpk4feZrHQSaKTn707\n4GW2MDVNuzClcoRYZ125PoaclCmZU33gHLXNYvyasw/1cO8PlsOYODO3Gh4p\n45dFVrU32Q7mOXgG4KwcGsmCiw6TLRmLeYrMrmsZZf3+XhrurxazxJoSHIzF\ndFLk\r\n=nJdF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKseCProZqb57WLMnz5adbjwCgvGqzMov0+H9eNwJB8QIgIeiTnlSl0cgmPVNVJ+rUF1Sc4yI+5zkkYR8rMs6S8jU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.38f29f8f.0_1627064168521_0.15569742934665198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.e0693475.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-ripple":"0.23.0-canary.e0693475.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/touch-target":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TGcsTY/BHCrxhQQ/7/3XijSzlg45+aBYzDWZnZnwxzoqVyJ62+sRyohlmuKi7gP+yLRHcySsGvaoQudKyuNOXQ==","shasum":"950ce756b624ae93785850f98b784402fc7f6be9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.e0693475.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDRCRA9TVsSAnZWagAA694P/jsg+bmFkCk0JcaKmk4r\nwHOb0tmpeN9x/kQiS75MaIVX8bRrpR7az0rHrpGUDWXCDS6pMX3YQfkwiSNt\nkbFLYMztQThyfRt2hBk5YBf+S2GgenM3k70ZIRfbtXJdc5mejDHgOAMlGF2E\nbPyu5QRFcKJ6S3e5kbXUx4NOPRmwzRZ44RtajZLE8YZrbVL20S0LicBLLeWK\nLG4BWy7eaEpqnCNkznKHZUOr8uizBWxA+5pC49OLkbNyN0zIWwGP1h73UU1/\nU9xCEdU3pnTzowEAqV+b+ImqvAaILEDHIjGpCr6ztEN1otLKA8UgL2SISmzd\nzOdl+6jCbT40f4ZOIQk5ExzJRf6B7u1zTER+OTd2S/nNk665zuipyBQpm3Fr\niUaSffELbHZUOFSwc/kuPpA8Vf90eDvrF2bSwZpN7ynskBjuOyIaOovTzn1G\nplYqGL7pX68I66ph5CedaN06//7aJajLb64TqCrdyEsOUBPKGhglSwLYQQn6\nu3+qYsyiacXqKdm8P9myDbdqxn4eah3h3lwtsK5tTcbgEC8voAFcQj4y2CEu\nZFrCbRRBB2rZ9T6QNb2X55IefmZj4ntV9HTlH15AGhV0DDDvp+UA1O1jhDAQ\n646L3sMTiiXlQWFqhU0kZ6A7P4aObQ4ddQGVhrJ59kTkQRyBbZCCU9aamC4y\nVAVe\r\n=2Hxr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAol3sHbowS83OMXjYb+teV/xWSrdfEKYYNPNsD2LfcAiEAsf/fFMSouYvBVaZBvDW52aO+/1ygecNyhxW88SsfuFM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.e0693475.0_1627066576886_0.4953735955762706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.d595e030.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-ripple":"0.23.0-canary.d595e030.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/touch-target":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oJC41wUPgDgZQ19CJSBddGvHL9ASd7YQeSSoDCvsskfKDDTTA3yQ0CAZzaCtna4n9R624WkKfYui/RAbnTYW+A==","shasum":"d38055715261d924873a0d39938c74c331cfc292","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.d595e030.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yw/CRA9TVsSAnZWagAAo1kP/iHF5neLcmtGecNAqXma\nyA8aUBUn1O+z32Ac4/30CdicQXZ4knLiXrFVVIsX8/hwqLEc5O7qNwqwcc0Q\nQOAPWtyAgz8iLJYMpYnbYbtu9eEgk6CYSpY0QAU+HMvTneIPNmvtLvEreSeV\nSHxNVsnx5RZeAp0mMPXXcY/u+N7SftV3ui3AmBGBasJGJA6dhUmfrhPHiU0u\nF7pM19BXnSf5ObRWdumVvBrIOCDAaUzPR3pjD74dHjhmfXZ/y5zXYluu8ETB\nyLVlDVGwskxXBHgg0MNSrvDVfZG+RNoYw+BaW765A9fyUAb2n6H/FhzAq5Rb\njb6B4Nep58dEpHc/BfMcRL9hYrtwTNIVXfYqpGLUauHDfWgczXdW4yWdduvS\nozJ6KiCYDX7On2iAF501ctf/lH1C9JeMyDALZezM8nxAGNCI45UfretE7BHb\ntG6G4Gc2c9cwQYOtzJEZfd19cZIZE9F9GyFjRgH1oTa9yRe3/O41DaepMyB5\nTGAsdhXjhEy7jHM97csugoL6takmrPEZh0iBqyB89k72nc8lXGqqUwACSV/A\n+n907KDIStPLexwxu7uzIX2FwoCAKMhJ09giP4K31ENZQZYZDC2ne9CJLdnl\nRGjNnXv8seHshqsOLe5QzAv2ML0LwGDHrH24zogi7YDWUM/fl8YEc5AMWqib\nLlSh\r\n=ib1+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg7OvwnPyIbH1k5ku0eFbpguVUW2zguyOrhB+wfhIiegIhALMc6d3+aN+V4k0AcsOS9taJZbVNbEpo0NL3gWeAs6ko"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.d595e030.0_1627073599237_0.9293347506839962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.fe7cca31.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/touch-target":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qibEI6SihfT5JBVCg270HwQm7A+OpVABmr9d7grmjtknRGPW1IXgEfHPu/LJ/Phl3PWHfas1QEyd6Nc6M8mp9g==","shasum":"cc98af7cf621bad0cf262e0c5c90f8dab4376ed3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.fe7cca31.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zslCRA9TVsSAnZWagAATjAP/i2LZhSRif0yk/bUk3dV\n08mvv2rE45nyppATADTat2DazApXLyMMPzgPgPJ8+fTXmKOKikY52856fsC7\nkZu1GHULgjpNgta3LH/DVt++Si7gpawN0IR3FYwbUI6/ebsTCiZLB9Rr/yjp\nt6TPuOkI4Px3HYckOiFfFXV6k5KF5roVNPtGkL5tRfwb1o0b8rkcbBgp0eQ+\n8ST6tDLgUhAxhZBJc2lQIOR1KvT89XPrxc5EG11Jb9DQoLABMLxcjyf0M2/V\nOl85B32Qhm4oc4BBty546XlgLLtow4TM3F4dsLKJzjALZBLKEy5/GQMmWaNZ\nrDS5Tevdz4gdQCxbWHnb/0XctKBCx8iYBxjW01WAEpXY64VrKWiXclH3qFux\n0e2KCdGofKMHydsAIcdntlH5rmyVj30B0fbHSDxyGtiivnBgDZF3h2GbKE0N\ncws1RGpbOA6foWI49NOuv/9Hoarv2WE2dx0llHTA/cIipxJaLbiHFiEX82dV\nOAUi3PiGUSTv9ty3ASiAcvg5+l33WbYCddtuc2VwTSdUijcUQsYshTl/BWVw\nvKODphud4gTOsk8hPafF2dw9kKlv4XLpZaZ1csLb7BAE81bQqpNX/h8kU1y5\nu26sFyjWENgJb0dh/RY8o2eAS+XNwXfSkIaJyR8mL4eDQTXi09YdA2rhCxYN\nXuK7\r\n=18Cp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/TI86wkf5lhJfG9BZ9fVC9Dj+icGbuRmAtWpTL6EpQAiEA3Q2WJ1yx8e9By33fZoXu1zw7foBfv97NVZ+Kg54QhZM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.fe7cca31.0_1627077412900_0.8454198942883935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.fd9da483.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/touch-target":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LhEmZGKSdtvNDpfbk775nTi5/yhIBNfqr92aAVR7+AcF/+BeP+fPMRCzgbUQ2IaaZ42Se82fxW7uLB9L8oQAtw==","shasum":"53c73af87ef0148f9f7ff20aa25dfc3eda17dd36","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.fd9da483.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygqCRA9TVsSAnZWagAAA6QQAIXhRZIwR+/wvQvYuOOg\nU4DFVbErjW4EE2MY7ILS1vIfCD2jcOHlnhd3Vlf5eKMnqQNA3xkLzhJkhBXp\nPoX+UioHN8rpW0uBNnqTIjj0rDa8dmZ3HLN8oO32L53o3pb4ZZxjgYAul5ct\nrLS67zh0wmVOb/IbIDsqYOiizd4EfWr/V60FOf55XJTk86/mgU7tFlsYMAW6\nqL2Lq07hWbCIxOQ3tsx5zs0pu0HmNlXko1R6Ut/Tn2qc7JiDjVKB8+zOny5H\n4A3kXxukc9eeKyp7gTYJSHLrhxaGgoQSdVSrXT+wbm1NcTbPkH8giypJu/Uh\nnrmCNP5Z6Rdf3LDjytDe9Uf5XXZY2e+SrCQ2BltxtH3oyePFE7UsbYXPKFXO\nMAPZZ9J+GBhIVOai6aEQPvskxBpuKgiW/EsdU1mipowTRKKp8gXuIzREGe27\n4mWCe52fkn4aqabq82HiBen0mOPTGHBc/Zt0ZYwheM3Z++76R1v5xAIKQjv0\nt/ETnd75msccp7xccKi+zmOcGKCLV2e4eLwdz5w/N0x180NbyGkkysxsJ5jJ\nu5j29YcPHsqdt1sz20RcjEGFv95/Faw088LlLfoqqeDKQUbFdaZarWfA4he3\nVBkuyAEbocTsatDmtDv/cNWse35pkmtNEEgELOBW/ykzn2sCEn81pSCfTD0W\nKL8r\r\n=qOSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMB4cZTZDiiuQWMUPXA9wipbXYc36+wWKQFJ+AyB29cAiARYemM98q20i8k9wCFv5sLcvSHPhnYBAPko7bCb9qjUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.fd9da483.0_1627334698200_0.20683801427918458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/touch-target":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zWOOjqvpGLnadov6lH/6HFecC6+Vk2ieKflDzGCcQ/4Cc43m1SNHKWExHglEFv9R4TdohZeWCvXO0gE8UzRHTg==","shasum":"5b52be538ef6b0b6afa6b39956e345140bec9d32","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.8a4c7e06.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zq5CRA9TVsSAnZWagAASqUP/izRA1B5AgJGyhoDlj0O\nAPp/FvcE7XlMB0YDby3yx60wyh946ZesHZl1+6MhWdmarbhFbjsepSxSNdV/\n2gdUbQevqiUUPebPe97EgQvj4XZS/jKBoXi7hIJs7jbmXQUQl+mrZWHuW1P6\nsLAGQALSEPIvpTwHcYWmOywIuJXUMnft9pdhriv2kdNVsP2yRLw5O2+Tr9ZA\nbZkChd9XOYg/OKFQ89NIOsyW8jQow+btyB2gvaFAIQ079YM7DgjGqZKg8E+o\nhmKKd7cHLpxqPVDbWHCFPAE9Z+v8obYPmNX9yPb+RvoQOT/ilo5J85CPYv/a\nQJvLtq7PVie5Ifz4bMNDP+lhyiAfmSWGzRJhysCcGazXoAf6Xl/L2ATrOEqO\nfn5rO034mbnE8MeShMafSztR7rzxnMvEVvSpEGJ1bFNBt2NR6HAw8vM+Wg6L\n/XXPG2vd/DS8nfp9fPKqW0y0A4j25UzFZh5Eozp9iF1mW2Wfy9+PcpI2Fntj\nCzM2lPcjXnbGz6tyc7ITfWddZOuF9NUhyFyoyjgzlTxrISyTTrgvjPAkmWNM\n/N0xR55RTd6gDLGFi+ecdHFhSlPwOjDHj+k2FYoWWx6Sa3/h/gJmHWUR7KXg\nPimkOWURWvbaD4iDNvTOFc4c+7/9UIsh+PGwTZaFEmGbteScX6HfZ/csfwvA\ni3ze\r\n=434e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5kkMwcHOerzsLe8eLs5PIvMYDkTD/eYkUqSpbFYmFbwIgBOX34qpS9/5nEw7qWxhGvFtRyqUO5ZtzSO+7EARQqd0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.8a4c7e06.0_1627339449648_0.8062814869822079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.5b395fd1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/touch-target":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mluQskbHFmBK+JqqgKhPH46XC32oDHWQQrr6gCMSXYrOWfyCptev3xR5iqsiQHurFH3AgdaqUKJz+tab3CZYIA==","shasum":"b0935d3168768d9a3a317e73c8becf47ad821541","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.5b395fd1.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5XCRA9TVsSAnZWagAAGokP/idDpZKNhQjtp3oaiAS8\nlkfrcatEXFw3X+39U0MpNzExzLI4/c/T/se/ARVGNpOl9C7QQjmcDmw5YaVs\ntwky+6gxMhxUwRemedb+tCR1+1Qaq+MJ+jkRUP89F/RiCvI7C0x0nVB2Wp18\naUERWfCah9E2zu/bIssf4pLgkQsIry0iI7RW8TjSsAa9K9O5MSSkQGJR4rOo\nQO7KmZCaVOTmEusipI/NHQyBee7rW1E1d8gzBpm2yksr6wBJsZzToBF0gnNF\nMKEyjPONUPsQVkQYACpH6qywoJS1YSkkQPO8cCvdpspVTUXXFGeO4f+JKvYq\nyTwtL/yph7Hgp8p/9aMced4q3Q7BhnF8P+ZjOUeiMZ8Tljp48cGAlRRkeZce\nihRGYxYpFuCi+Szx4ExfSpcADjeaGInbbyDKFEwHZ4WXo+EORwZ0IuYLydD5\n0Xzou94ly6Xepm1GhHhBl2rgiKTTRf5KBB+lspazrEOyZWwZx5gzDF4RRlbl\nHMnKfED/fdEgjpeoayPpYq6QaNLrFDelkMxIFrN1W+cCFwglgnI9mbx9E+TE\n3q5BZViVc/SigQ3JajXfhSltfwyYBELkgyNoOeDSXgVHtxh3eaZfLqHH6tIv\nKbTYy9u7NXl1V3FPQcqjIPiPolcWAuL6PkztAdAd4ZHEbqaNMqukFJwg+cd1\n6u/o\r\n=btZd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDW+xxjAQmTGYc0eripQezFrfgrof4vLcrS+c8vwYDixAiBSTreq7uAgeva2iB3xr51WLW0mHEdquvPnwtixuugQbQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.5b395fd1.0_1627426391587_0.8351515085560153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/touch-target":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RWHHzcR0bFSs8YlL8PQkt/rLsLvAEK6XPyjJ/gkEqQcy92UioZMiBLBZw7B6qWxWSAtiibqG2Kx9Qc5UcCGdkg==","shasum":"76f440d5e318bc77e2fc064e359a2cd31b46d12c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.e5efdcc0.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJXCRA9TVsSAnZWagAAaQMQAJlh0QoPDAfMcT6mHOD6\nhr3PTEmY595tFTruaCicvvimblRlelDeJg9IknwP406RZNGNZgfpWHhRXaE9\nI2i/ORqA9J/eV3H7q7IzovGgYqiymN1J7UybpZrbaoAiGnLMcCAW+bhHcDQh\nuTVbFw+QizOYjsF0KSY6LGKNLX94/AiDpwBjmKGOar9yhy0ZKTKmOEjTMug3\nlwjOk0825rE1benK1e0tw348bIca4e/ky2WI208Kfi/PGufkC09BbvTECU6r\nhq5pvqjwH302VsiJXnDbWe7VUs8fSjGAmDuq2pQV7Tb9B/2CHsD4lMXFqGZz\ncjzKgzeko4pQTusO+T5vCODe24mls8lrQjLFsxs07Owae5oRF6FDs7GvFM9q\noV9IBLSUXZacPkNPjS0t4oPeURwUMDzMKEOcx8N/3VhAZGMMQC8p9cFKLuub\n7JPLhM6fYt3fMpZ6mZSvUdAp/GbyIbPMKwen4jIRi37yNnNuDjHvt7C7ZCpw\nG65bHQj0UpCZ5WEBVfdaDOvr5bQsbCTA95G9vDy92s9wra0jzSJmYlL4TUQG\n8b73s78sbvON26F7nFLuhfyhgtB9pi2Rrpv/mvTnZin3H6w5BjvnN4IcXAaK\nsnlrGE3dUKD8y6WISHbBwZXi9CawFYRUWcYzjUL54XEvGVsiRX9mT079gGSF\nOEp+\r\n=RbhQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICKCat0stFdWSTqhNGwGwkUcTeUGIM5uz1yOGE7yKv32AiAZ1F0Uhe4kGXWBiO8TlrHu3OkFTDB//5oM7xLGiQ+Qfw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.e5efdcc0.0_1627492951358_0.1773482226961498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.ab310900.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/touch-target":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P3+2yppCDJaOgBqo6tMXZBDbVlWNMu/lCeFiqslCDZlwEtaKLX7uiJOI5wQRVSU/AZD00g8p0CIClOrJ1mR8Sw==","shasum":"21c6e84435beda3e6727ef01bf0a373ff1114d0c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.ab310900.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxICRA9TVsSAnZWagAAW1MP/iZzuKII8AMlPEZubnMU\nkwUeKh7fcNphpl3p6wu0xJkcWSS2qCs0TQFVvy4LdzsikgzTHAtB97z7NANp\njvw4cFkFVIUHpoc7gMO2pgAA5FPtP+m/7LKxIN7rdz2MKc26A6snNblfzsfR\n9kQ45TICNcMUZKMoCBMwfa7W9Wo1DT402f8FR6youF89t/qYzk6NcBdYXGRS\n9sT6VCqHHKuggx7GvVVt63aqCmmR3yKpOSqOy/syJzj9vsJhdgayLoy+TyTY\nj1Oekg7gZdjZ5rKADvmHD1GHIQ80IPkX6ICYVUW4NhJlkU2bFbxQibrgNdll\nS4ki01i9BnGaDEnYduG21KUQwV2gKBtddQBFm6TF16iomvFvaBnK0dfFvYNY\nfuG5y0+eddW5kgpsGTAdjRlcHlpJRkNbKu4EqpHd6L3eSWJ8F86lv7Y1y8/q\nO/XmKpe5g9bzggmzmTcZSBEz9F11ltjqPrLgq24TYVvz7jmwZgdsne5IK7Tl\nf+fu0gSPjI77kEFJH8gQqgOhHkGTfuDpwmZbjpud57izcvIEKFlpxLYhcFpY\nE7nTdcdfnvhDxS1WS5lwe6WsibJXDlV7YwRumTaEk//uf6oQH0wO+M16Sk91\nYZ5KSVKFJPMrEZWs7nfcinyPZsjSowGYNuiYCok2GVkhksD9zgtPOJ5lmVjd\nCxdw\r\n=k4O0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDM/lQQZxRW4CpvXxLRYX3GllfCeX9y2QS7nhvbSTn0aAiEA4gxlTvvpYLi/E/Rs0U5wHtm5FRruXhfyOyQehsXX9CA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.ab310900.0_1627503688157_0.7164201867212805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/touch-target":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1SNvbdgEz7Sk2juTO7eXTZcwcFZwL71niXAORRr26S2BFH0sAszW35sh7BlDuPQWqdgaFJlZZQ4RXwZZ9jx8Xw==","shasum":"5ef1365bdd8fff6525f9a13db0e304a26d1785bc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.21dc9bc5.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1kCRA9TVsSAnZWagAAhAEP/1OuMRc/XcPKT18dcI8V\nISJ6viYXlQbshgUa2KrPo4iEjruyO4zLICFK3TGY/FEcs708slMULXcC5SJS\nozKrv33bxM0fp2k+PlTfBN2NA/3M2LAmytjgY+MEIzbwA9gqTiR6qah+BOPb\n3HGgnNmopDqJdoA88/BNfawOJpQ9so1KCOIcVbIwgP3zy4qAdO65KhcwORzD\n00UlGvyhHyFl9k7hqrNP+cEa8gOD9xE81pdABj+luioxVFnKCmYLHA6g4hbr\nNrVy7nPwhDukuDTFS/ZBTGu17lvlCUKRiNP5SYEyXCmtF8Kb1f2U3h931VXY\nNZmxhveQp1l1S8N9thiz4YLum9eDGCYJWYKaY1orn+F0PjfCG16nC3CcQa+g\nPpyioEABC4etUYdBVrNN56eavfw1NEGoHQ9OaSw1703daNZcvbpgDdsfIx/s\notPB5KEcoIsqLMxjpnlm1erz4Pd+5YPZo/Q6d/aQGVg1WBECw7fFOBb2efSh\nAuGEpbfVLxc0ZKa0RVI6cWwfMPzzrmC29QEy6SN8m50G0R1ZkQL0wExCvTOs\nS4F6/A6AlVqyvo2kx5Qv8KSEQgubrroSh1+Vts5lB5z2l6lOTpzSMqwUHuEO\n2nJ1ypIPF2BOWzlQQ2NToJiw2j6ARYGqcxmlv6MlbrEobRw4VhNAKxUyyqXF\nj+Wn\r\n=XK11\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEnjkVMbhbsDWm8Z+/wQnFyt1Br2FsHjkOUvsgAygH9AIgUn6kBWoWU2LwRI5hhOVXkaF3D58UmoZEm08+zvPgxvc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.21dc9bc5.0_1627503972648_0.39713555625739594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/touch-target":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c3vjPyyJbuf01vCqcpjJMz4vs7S8J2ME5nMxoo2MyWxvml3m6P3GGHim0P/ABnQ9u5sbw7/UtzwP1rhKTnKUYA==","shasum":"7d95a9572256b4059ddccf0871f374cbda996985","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.68c7fe5c.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQbCRA9TVsSAnZWagAAV7oP/1t22TczFqkdyydH5CM+\n06tvbR6R6KpI+Ze7KnE/LWfTXUwniMVi9rkx4qb9g9cWBCBowiCYGJ9zxaNX\nb51fZDqhvxJ7DKDKA3mcdCr9ayuk9iiSIXqIdK9mxL7mxmVviqEGMoa7PCwZ\nLWIMIR5pGFav4qc86cgoQCQBS7VNNqoBHrE34awoilRDSGEMEcV3N058euec\n086r/rBowGeR2iEALwcnp9ieam8Yk41ODi4g+ckUjVgr1+oT+fY6j3Y7w7rO\nuAEL4ssyIEdqmfj9Q13KqgT/zDdyc9zrQ4X9H390v81m6sQxuKee7Tvk/71m\njUPGQmYPYmeBoafbJTS1H7Z50XYlJA7m6tsIYBrS5KS+DBzvIS+DyvFOlQWo\n/3OCaXq33HH7Bx+ZQ+z+zRNlmUHc9NpG1zhkiUDj8mirpY6LwdisakyxSCsx\nUXt2GfHel6Mr/iawRBIqZFcS3L4RLRFkMDoEHldy6VoEJ8+WxM+GF39jde07\nrfp1axfd/7h/hmwpNYWeaXIIMkSdfy4bSqiVq1/tPqSWzivn6ELEewrUlGQ7\n34BH/EepqEcxLoG+AqDi7w9fWroJswlzVongF7xJjthv9kqWkDQcyuPocS2h\nxecymFiaT4n/fpA4ChAjNl4xzn3jVNFrueOZrOq87h1VS+LO5txZZNuKI5Xa\nJuC8\r\n=Hxbc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuPQ1FD68bne1s3DJXlAMn9TxQdH0KWXDgzyoz9soEHAiAb3EzBHYKNOwlkWic1KGLit0XSQSqh/hrs30LQgOjVrg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.68c7fe5c.0_1627583515032_0.36297904592738894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.aebe39e8.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/touch-target":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TvPaaZ9O7rl5Zddt5D61dKejYAa12t7YiPPKXJCmNmq4VLXzZ7gBsbfTrI6a4hudgde6y00GwV4d3GrWViIKeQ==","shasum":"2e5508c84223fe751aff473e5ab391aad826450f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.aebe39e8.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9wCRA9TVsSAnZWagAA3CQP/3PxhAsucnce++gRcj/t\n/lJfqH3vRQjeWFYJMaNM02pyNnFtVXaJlIZmS58O01KLsfIakCKw+a+g8nEh\nM7i6vxOYtcSOH3IcrVM/eDf5pRDEvEGmhGwlc9MIVXwnW11KFexMBHg+y++W\n4ni9E8v5ZvgOjbip0I8CH1PMSfLiCtLUOVRiWW/9qVt8vZFzCO7VRf18/Q6x\nwU2aCEfcxvzbyzcn+dbmAoZBp0ycwMgDQObp0LG/ScQQtXn0Q2FBRTZ54LWx\nYUqWNPmIRjxKnt8wIv9cyvBzXyeQgQC/kxWA0L27sHI/+tY9IIb73AN9p1qE\nVMpLieXZf0dkNzf2VaWxDP+6q4g1ZaWqLBUxrP/+1MtNn0hreP0KX7wwd1oM\nSLwKdEKFkfuNsEiyrwb9jF0oT38PckdA5uCEuFnwJK4r4Cutc+gW3IpDc9vr\n09yj1Lan/ALmAKLgs3XsP0eMdcSzfX+hLuUSxiCUy7SELOZZ423YKFbemf1R\nipCI9aXEBgTMiaWZNlxW/YNOXsHNAX7pHnBm/hbL21zatyEt7YAmhnj/VYzy\n0CoENEj35YTg2+xJIIeilJ25Uka6UAkHO8OxEjYQbK44tHkai78xr6yl7Tbe\n2wqFMek1MXKez7DhJTbYizy8XhRpD87iAtceLIzl9ES8B2zdtu59DCupnzkm\nJW/+\r\n=q4Lm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXBWoYHJLgJRgcYmuOCftprE3jTeb2FZseKeF/BK6ckAiARo71hFmiLZKPLNf+CuB4L0//BFv6vAm5oGAg2ii92yQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.aebe39e8.0_1627672432219_0.19605598746448605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.ea889c69.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","@material/touch-target":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GTyBnq8d/7I/2TarJO8ThVuXWWivmCjhJsec69X+ACr8u0Pep3u2OhTi+JQsb+++eY9XA4eNkA7cUEMAe2o14w==","shasum":"f747246020cb0f1e1e655a3fc282666846d21a5f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.ea889c69.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9WCRA9TVsSAnZWagAA3UwP/3UdnCmvmscHgn02IZn8\nanznP8OX7leN2Pp6JFe8W0BXf1BRO8r7VrOvE3mIbvnsbFJa4woIx3TUNNRm\nhAlE0yMhcYq214+heTVJXT/FR/jgIEUSU8h/3h120VpdtJp0wE2R17fAVuIY\nZAm3/IFHkrHRo3Yl/QX3TiKYbBnxHsChJnU8O7re1h4hWOSWpFUzrMyOPdKN\nJZLTzeLQBObref9H+SBMygB5ClSUH4MFZBkoC+FGTiDqdf76DpEnmYIBrdpi\n/jlvq//9j25EWvK7TUfwP41ohNkjfDiTRIPzOChTSILq2/FAOUNRJKiGy34u\ncpxgukuSzGPdHH49BSBo8j0/SvPfkpsskkrGPhIEcW620VuKBa5ncAFVJ+Mi\nBsSsWxFkQEMsvtLIt5ko81TTZGo3/HFWssYh1CGwzHTIWy5fY9jZfeTqN1vg\no9YCCI8N6H/uJjn1B4UYVebYD1BUTcsFo9EXIoXm8wRN9AfgP9Ti9UnEPD/X\naq/F02m9NsdfQgmVDf1xbEwEDTyzR4B9lSVZsXOEZ0H9rPQ8MdcpOX7xxjhw\nRMnwu5DNiwlFj6v9xFVZpVYh3FqU92ZcOZdYRaZSvVP2ITxmqYSa8QTaRSr/\numexLrqIt2AG5sox51qK2kejWLcoIOIETKFkEsq7bZ8AX9ZbactH84qwsi/v\nMYpb\r\n=rOdw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFyaWVIx9t722HRovFrQzxlTyl5+h/e9pcCaGNfNq9UDAiEA1BkHCF/nESFIix5VAesb3+bGkeVMrX2QFaY9sEyOCDI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.ea889c69.0_1628016470816_0.32039471516836815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.21918905.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","@material/touch-target":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oMubEYNz2mxINU8BUYH7C+4j9jJLCpCdDAtlKtidYdNKTADoYX7smiPJ7w1o049Nn8t61dFcc/csgw/1MfsI6Q==","shasum":"23995a982363831fda94d103b0c573b27381088f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.21918905.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbG5CRA9TVsSAnZWagAAG/QP+wdthufxrdlpmWAEbLo3\nNiUpYwS1DfBEGIBTxF8PlUjU8TqArGoVy5+qAiKlI4xAtQcQbSrbfQgAP4tS\nzeoc3343KeHXCgWhtj6gPv2WMYi3LiVVg1CSWwjpMI7ENMr2anatR1hUGsh5\ny+fY7fX1uTWwtpqZo7EJrBHnTnMCFjKjhmXJfyCtwKkeKqELgP2rutp9qqts\nA6+TZ8I5QgE3xj2T0MewTX/HbNOxnORZaEeK7iVxv+Lhbp3d+xju771Pf2/v\nK2WZYGMPMegGL+51MO+eYl+IlSXlV/yAm6SoYbxT79Z21mbC+irktnolY6Vq\nb3EoJiPvmh7nqYUPHzbzYQmnhBqxwZPNqPXkzjH2NB2fWYGkmMpVu/KSCKMd\ni279CALiYebcrUixsYOgCCFD68QlkKu8XFNxoNGo9IxrHvu7IniVfSsUHNao\nfNNOGz5mnn93B/OPF0LJzJjilmp7jQ1xnQFC7DLzcHbxGX6ewhr+q8HZ26Cx\n0Fx/fOjfpZCGHW73bogxvB6Md/8ew+b6d5Y8wz/Y6GaZxnCT+DcoxDWboyTw\nsAdbg/0ThTmOvoHEqgIjgwa75wRHg0G4XqCiPN/lT/v/eknwpNo81fERz7kc\nV+gjRafIAl2YAUQa+f8XJQknHWRq7ANiPu10rjQMgN146JJV3Sck5k1NkPKc\nPs2d\r\n=K3Ky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHl9ECfkpP2m/ppqIvApe7kyYPwlHfSUv73d2MQRfrdAiABH/WyBfoQ9RZpjL2sNhhuJtCvq5usZxDThI8AUzO9aQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.21918905.0_1628025273746_0.29483096183322033"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.193c87be.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0","@material/touch-target":"=13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-saUy75UYpJavs8f88eF/AszYo6j4GgUFiR2+zHVo+6mg5nkGcmCen3vAMA1spZ5/8ZAqVDNE6NHlzNEzlt2XZw==","shasum":"6e27a6b9f8af54c1741d96c02da9d4d9a48af97b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.193c87be.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdyCRA9TVsSAnZWagAATp0QAJ3QCnN2LqbzjCHFEUEX\n2axLvGC4l+l8Rw1miM8EHuPoBcPo3aZA4+4+DxQizHUNq1DDhH9vL7F1Zdc5\nimtDozwrUOoXQKRmvUe4At11Uzp7svazGnuz52f6ZwAfNCneNGU/9WZT9MMe\n7mYNQ1ePk+USZHIouFr2D5XrK8kiXkIcUvgbLHU49SF6ZvMk+T/ohAQj381h\n2wYFl58dvsERRzFbTRyqhpdASu2SyUNJZFSeChSJXgmUBbZ9VnapGUsXmliO\nklkffeX0JJRNkn8mvvOcdiafX768bJPHxtpaHP/X/LLOrglD/NCk4D7UDX+G\n2/C7bv80v8kd+VL9cnZvC4Yu4XOolpISjYW3wg+aOJLo/NkCgVORVO9m+OMl\nEGQj1CVPsXTaNyuOx/kVEyoFf40Y2Api1V60nGHrNW8G0GNTui/rV1k2/Fs3\n2ADN7mkVjA54bYIhNAJeoY+dGkjjju9u8abjHr4dN1DhhRKmDq4wbuU9w3qP\nXCNy/OCp4nm260mHybntKh+6T9QPA/wLCAm3+FNFOu0F2LyR40SYuv0XCLC8\nl66GgL4On1t7WSDLC03aDS+vupI2Tnqit11FPp+5p/zJa7eqQBTpMwQNSSgv\nJsediMKxUeDh9fQHpjeqGboecNPkdpgNhoZaURPnShrDKdXc701AIK+fhbEt\nB9bM\r\n=1m4G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm7dTT4G4dU992zJPcwxwEX4aeOmTxbQ/ceVHo4KOOkAIhAPKDz0RLgQDJojC5TFNTYcx8WL/R1ptyyCBP2eUkwvpc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.193c87be.0_1628100466017_0.23246715934172868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0","@material/touch-target":"=13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BBsATRuvFy+ITKrX2ZyYty+90lKOWjNTHnJ2nhjHeTSA19NEFqRC+xW2JtDtVWQxsgk/WM6ZOTDNx2QcrwNsmw==","shasum":"6eda9a45d69f7eaa1734537eedc2f9cfd49a07b5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.6fc52d8b.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmzCRA9TVsSAnZWagAAzUMP/0OGJt8o7Jf8HQJ/nt7n\nPXbqTi/vuZXC/edHxjZ4ezBk2on74SCuX7eusH47PWUh/qDpapDUpjaPr0V+\nzW/OwTHT75Et1KcUSv/iUyEeUdNTt4zJV41fuzjYAzfJ+Zkg4sfIjP+rT3w2\nQAbSqf3WTbRJ+M2ZyeguPvQE1SV/rXWx3gr2oSf6luZchtJpaVJZGZYJw3l/\ncrplg6DfoWBQgTJSfcUcEDTDdVJCUjQXamtRtQ7ZC6AIVge+Cpl2BhJW5ESe\nbn5g5zHI7T+JUauWtGnMwrXuo/fVlNkhTrHSTv0VfYw5V0jcriqz+XYVW8R1\nB7tI/poeOZAAL9LV5UAd3iYOXlI/qlL56B9EC2RGgEhYXe50pz8yi4CTOoFh\nkw8qRvTRrwahqi2ruxmyrJsCDONuvDe5dpcsmyMh3VB4JO+MuKWrbNsTHFTE\nmwFf3UkGfXIQta3DyLcbpJbiYQo4smf47sd2+IAnasxblzOwp4JMHGV/jlc+\nnLfTDUfLuJFRIpsLcsMSH5turk3n77eW5JffdDhLuQBir4khQi4wHAWW9FiF\nCOZGCwZHQ4b+MQrzdi+zJCy5LgNxzI/H+OzJwdEjHuylrGKWCqMv+jmP8w/c\nNeu7XdMKlfnQmdVHC2sSZPRh6t8Aapn0icvNtmfBQvcoTc19Bystfiu8TqST\nCrvT\r\n=JDbK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4EB5FYrJQOWDWrtM4qBvRicWGlyLKZ0BJT5DD1zLCyQIhAIkPg0dAKHL9A1Jlz0SpFB29tEWiUvDWlmEBIoNQL2lz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.6fc52d8b.0_1628187059012_0.44803668853862355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.e2e9777d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/touch-target":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H7s1Fypf6hFGZacfyt6W2J0pnOERR0rWN8TBX/BYPabokkBwdvupSqnsRK0i46/5CYgCesv3SRV6d5BhUgO8uQ==","shasum":"cf9b60951d90d7cf05b02595931ce1d70d073e8a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.e2e9777d.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqFCRA9TVsSAnZWagAAdaoP/RexQ7Alv+wNK9lPBn3/\nNSUGIlz5GVNVFjyEmg45oTyNbzyPcRD5q4RYDako9F7OaP4JdnoIh7kFuVEo\nn9cNU6jmtRCEYPTSZvwBNT48tjEPsaLjK/IWDbl3nXvSp5t60hmb/L/+znM6\np6NJ/Jyqg8nDnZ74wsJgWDuHMbbpYlYVU99Liy5QhwjDlfXSsjw+9Fm3M7dr\nMYqivyMKx6rSrPWFhaaGQNsjrdsuUI/DAKb/ys7Ly2yE0GnigZ4G+ULxC+0E\nkK/r7ObjUuw8hlM6j/kLc70kLwYIcVWZH/jV8oUjnezK9ywL8/cOOBE//uMM\n11aTyBuYaGX/KGXiGW83vRhym/htlkCJJ5zH/7H3V6f4tXJgY769SBdwNehg\n9iph/Gl3ND0/PTWsW1Enx0GGQCN1/czsRbwPgcllACGvaBYrSgYExr89RQhZ\nQddO3CtFxFH/PI/iKJFelJIAefNsX0qFxY39GHYf10I6Lf/i1kNRJ2LW41D9\n0gMNfte2ZaN93ADEgBxedGEGFwqu7DgdrxJiLM6OzPTWJiuPfk7FniToka2K\np1FlYPHhxikovvZVwQA/Pp7fWruTVcQzl17V2rjYpcAshByYv/0TsJZydgvD\nOydzzmxY65OMsVh7A+heUE0chf7HW6fU4i3Gjs6ZYkIB5L0tjWQjKY+lXYZP\nQbt7\r\n=Q3Z4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLD/AJBtz+QT5JlSxi0ZEExkGAFHQBeMRM9VUX6BLEuwIhAKn426SJWus42tx17BOxWdWEj5d/N8D1jIfKNnG0+ccW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.e2e9777d.0_1628203652857_0.6302345696224725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.72ff1e68.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/touch-target":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HVwSEPtVStV/NJ6UhZykG+D1ZbeeI5K1wPtSOzFC19l3dqCEZ9kUlqIQOJxTgrWTscocsPAFvseyPd9vqMSQrw==","shasum":"28199a5587822e7b9dfd3b7e23c990e552875cbd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.72ff1e68.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaA2CRA9TVsSAnZWagAA23MP/1XfXPWkGVY9cUxvall+\na4PSGje5Tf+ypTBx7414AyDCbvDMz28h5KKAvHC7B/cXkvwPIEcNfzIeLp+b\n0Hwxn82p4CEgr9OYiXVghorrmbFVN9y5AELlR8aAAo8xQlAh6LBYuoC2yY4m\n7cxwKOlOceNHejngvTPfkQG/lWwHlhRrvIzoJwUK/jPVy/rewiFomWBlK0Vn\nWbb6/bItdeK9kiLs4viV5Dp0e/+bmvtUf9Kb3T8ZoEo4uL1qC0LR0L8EI/37\nXRhZcs37bkKT4wb584DJHPAkB54h7R9dWgpvRn34irVfdDSWK6Ke1LHfvdrf\ny2grkc3GNlOlWpTzJk6iU54N3no0XEUa6CO43CPPGLNCENljTwHIjqK9usH+\nvSGa3lwWcdDScDhYUQfrbqMPrxxQs8NjzAHgRolvqsTHFkooWm9vrB+EOCSu\n4lbwV+PB8aIZdD2PGPujdUYb4ycvfvTsnBnrnn8LhpUYaPqm34Wkd1T2rURT\ngPCQ9tddt4UyvtUKWgJL1eQbQbH6tLDYqk0YhmlyZ/V27BY/iigqoFDfsyl4\nu3t5+j0Tdf/ViBdsA22NDBtFHuossYWmWp/dCusAl8Avi7FbV7xVKWCNI4Vi\nNLXlOoWr3ox4k2ckb4KdpGJBE1GQaDNXVMTmsPX0iJB0W6Y7/81cqtnaeYXP\nur5e\r\n=d8FA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWoM11FngJTJDEQimEr8oqtHGAH4fNubTf82b8tc6bIgIhAOxVsOJMlSIla9I1uUNsN9YYAc0GSic3b2HYqca9C4Kd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.72ff1e68.0_1628282934789_0.617495833390747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.c527e93b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/touch-target":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cO8IlP4h3BmlJHm+JQaoaczrILv4H+HzTmKuJd0q4tINEyIfUzYFsCmSTqzMG+ZYjJYnDOyKC38da9LO/h5nzQ==","shasum":"961c45a295eb8c84ca927b4919bd64860a6557d2","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.c527e93b.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVNCRA9TVsSAnZWagAAGdEP/iTXdVHP7fGcKEVwVZ8B\nI8vP+Ma06uNH6dzHofJ1Ybrq4kABQZ5UD8OOw8fQZWm/+CTk4Tvn7ONVZ2qY\nTIo0wafS0LMCxcrAX5AUpeM/X86lfAbshEENMwb3waDUk/iLrDsxRcALCRl6\nI8x/N3mdjlx9z9qbKPWhvykz9WNhuzuIMx2MM72r8Osod4O78DXzjlYrYhKB\n08Yq2vMX8h00h1zwjla98EJY9nUdxc1/PuxnTyMpMwpsHHrN74aybS7j7q6B\nRTmqwffiYyKC4ydvTeFFgW1iGS2aQFL96FE09UUQyH9IeRJHLFLukskLP2Ml\nNqnaPrQWI9l76t0xddBrcGGONS1U+BxxAzC5UpN6Z/SiPh1vAlpF6WbE6Icz\nuCrh9ZFSnC/fJEdgsT5gV58Jb0r5UZ/bmK/8Ah0O0X+0qpA8O/Sqm1L5UTs/\npDfwOXtp9ts/y9SEy2kBsvUxS8LhkNDgOg4eBXG4USECV9PchFm4EeAjd8V3\nx/p1Vz5pIOvqGiQ542viJkmazmSw+d2RLVU4WsXw5gB5Ltce/vWSjZRVxi9Y\nC2ImD0to2V0k9jEpSFsqzC4Xv4P7gCvED/E36PzsfqkxfNwNaaSdb641cbgn\nmhLmKqdrrZK2HNd/p+cThQMAqmaRMWDMoFkaoK8n1KzzjywItzdySF6mXpSy\nmBJz\r\n=v6gK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRkEOSvQxnMvc6mIuHRI1gkgWk8fTGX4YvU4UVFt6c2QIhAJda0ljQIKhIPrN5wOetxh8O7K4znwOn2bzmKT0xgCBe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.c527e93b.0_1628284237771_0.9704201411750142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.78b1eaac.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/touch-target":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LoJzcvHrTMPH/qfeRTL3vpJ13Zbbiq679QnD713X2lu5Lzo2vBy1X61vATPgr7/unLBiI7jrC0fggiwMRW9J0A==","shasum":"3dbe20ea2370e80dfa3a33ee82f7dbed9dd7db4c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.78b1eaac.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4PCRA9TVsSAnZWagAAHrAP/ip8BKn73tCa4CNO8JRS\no9RyWbW1m84aAhvypMzXVR3QGuIJtvok3kY7V0IG0bpYLxd8TniOmyt6tAnp\nkolkhynbX34APsRU/p9NlS2J1MJH/XXhGp3tF43aEMCEPwOiocP/CAAfS0hj\ni7+t0sMxMRZ+Uzv92sp/FT+muE8vuT1BLQKjhVmRqUjIsT7Rq6UtQRFifity\nIJ96FN95QagplvpSsO9QOeH4XK4RuIw9seRcodq/bbYojGstdCgdXOOBK7RT\nkwxYXbDTBvZSqwFb0V0Zt+an2tA4sIDQdTyoy7rwrGasSQq7UIc0aYgmLGFy\nJK9H+Ad9+2K7w6ypWC8KDvtNLzRIA++7sST4Jyk5POWlA9Tm4eR4cbNyaMzx\nxBkfm/FNh0s4ORkU9vxtsCZAkrXpWZvYmAZvwXvJFebHgLXOoAqSOOQ3tn41\n/S5nfm6YDblROevqD1zSi5ChcXvE/g8vHPhLGgClsBXRpReez42uQU10L4Aj\na9Mb8fLtiuZpd1DUr+FihRiTFtLwqu+lZdD6U30ziRbou9FtnWxTa5Ti9car\nAH+5gmHOQmBq+fTXoJ3mBX0338aocj9ofM16bwpdDAVrwk88dwrBp8ippldb\nrep7hQxGoZ2ri0FCmSfRX02pvGYBIG0qykAVgpapbukLvJPR8CrONhOvoBLS\n1QXc\r\n=qtUt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDULOCOmyC1Ye8FITuy0txQUtwNuFSvoQMmifM89Zd5OgIgHsbdrcsdZhtBvRqiILDHF3zNnhtYcl1Y2yUg6ZbylWE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.78b1eaac.0_1628532239537_0.38651928007430625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0","@material/touch-target":"=13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tATbwnUv1vNSv+J2K35clN3v5hGVIlMeAtzhsqYJY96OoO3TiIU9WUatCO83BVx33xxB+dLc20beH5ObDmibHA==","shasum":"270dda79167df0d3284e2f50a394f9e9f5ef1f42","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmnCRA9TVsSAnZWagAADYoQAJ3vYiIvclwRCvgP6haN\ndP28uHrMKyj6zSzfhgGkYf/60GxNbgRlBoFq6K0zaF32FqXJk2STejadNk47\nI+Oql6pEziNM5V3rog+AOxK9FRkK3nGPNABH2GVmo9+ofrjrv6ZW5aeYcTiq\nIpe2oqPxeckwFOUgYEOU/vKfMRABKctTYAU5LPefmHKdIWUEayLYYzK3S0k7\nChwmY8Snj/mgx7G59FUEBxMwtggifuTh4Qnjr+KsgxbKAPwiHqRBtBhavbKG\nIr+le+nLB1WXXSRheFsb2bPpl6JeYKgkQtEAW3xV0qAqhw/f/lK2/nLUKs/x\np1Vr1pI9ovaX8WbthDzlYRfJ90abjFM+/qc8vX1cEuov1GkJiSjPKruleW4T\nzAxXKBVUCG5CL3JOC1VDnjtfn/p6lywa6R70uJnzZhgDUYv+5qHnEMemr+xt\nrXyS5GVAtzdQdRI3HPttQFnzMPsvXOgnvRvr+lW81XjjxfVDswpaOZnJ7Vny\nSe4sHWREcSHdHjBP7YEBWS3vmjC1VIFafdH4QDTwb94LdVC2Wf288qz0C2KM\nVEi3PQ5f9nrFA0Wh8OrSyoRRnTdDz7u2VU2zUl9YcSk6pUgUvB6FBKQZaArq\nllQmAhCvojCM43/aHcdo/uKhcKrqpCk1enLgJDTcP3rpezUufVFqadtNCgnX\nf0xd\r\n=G6Yt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFzhj98JF+oVuCs0cQbcU2fPGbidtOfc4GE+PW3NLLFyAiEAiumQnql+X9n6LG5tIYnL3Elx5GcU/7bgQCQpb3QHjAE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.a8a4ddc9.0_1628621223558_0.183355428521645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.99fc0632.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0","@material/touch-target":"=13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UoCBaAgx0kFJZFpVO4NlpDq8fct8Ty+h3CxSLbgrn6B7prrAhJGHQAfdeL9OkJEfcmx961OuX8C6+kNpjqCI8g==","shasum":"21a930ab70ed8e6febd6349f8b59204f8f24feba","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.99fc0632.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE15CRA9TVsSAnZWagAA5ZEP/34rBALO2rQvGhAMqXh4\nqXMJcy44ZFjgVmpMbo0UkWuk4364V0NSsmqBE8a0Uj1XR642A3nZXcwCTzSe\n9jprTON4IfnJklE6Asl5oc2vR43iu8Jv9DRcbmCnZEVNH94hEGez/H1ZG+IC\nkiEknK9XV2JPLCxd/xEkSiyD0STqcrnu4oEb7FBqecWcapGMQVm/FqiF4dyE\n/IAZzHGfXOoxzRglBEbQg0gEu5AR4yqXL+KBHPLmEdpgHcImijIgFaxZqcrJ\nUyuJmcFb5tR9xkNF6cG6T4nMFfqhCN91rR8J7chRKzhU4ddjNZg+ctk5Nb7Z\n2feQqe8Rfe4qQDb1mllq4zg8tXpWxnOYFJymcPJPfcIv2G0P/jJu2Zondvl6\nzuMYIU3tjkc9+N5XbfSVIjwmiVoK5aTZ7UoSuCcPTeiZep+CI+2VfJO0LLid\nNiT3yTXwiT5ZVx6S9lX0eRPxyyWrpvPKnp2Lu8cduIqs/ynBfg+p8MuB2Qxu\nNDueWYHKdKOCD+1k7iY+glbelysuouhk15z0obrEcahRIfBThIE51kobIPIz\nn0LEbGQpuKibb48ZvoWpcj0SWUbQyGPnc/LRrDVtcgQL8VDUsGhnzPxge44x\nEcpuPbT52BfptMl69vB5nJuOCuD9GGpa8tC6msUlG2YGNwpJN1bM3rlxmSb5\nzKMs\r\n=SXEI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVYrsJEuUzZfl3thxMc9n02zABinLNbnfWWY74EznK2AiANp260vgsmnSORTOet5zbeuvfYCgVNCZxXLhuTaJsTyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.99fc0632.0_1628720505673_0.9582499202216093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.3f47ae57.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0","@material/touch-target":"=13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6NQhDAXH6CUB898XWzoB7ISX/xkckYhuO+HKpcTx2tABG+PFWILO+zc59IdT06IXXANGiz+C5hCp82lxYLjJjw==","shasum":"0352ae2d9f018db82a33343855c87707dde1549e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.3f47ae57.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGpCRA9TVsSAnZWagAAgfAP/1MUXIkwkeUTw+1vW0op\n/an8DhHhdee5+MQdsKCSrLVpWOsP/PxQXP8A3SPG09qQ2/acI11AJ5hMrRaO\ntjs3ymay8XSuwkkxrsZnaf2XzM/BpbStBGgaitw7pjKcH4O1UWCMCRJeoYsT\nf2mZCun+kX06GBpSMjdlUbJ3VAjIFwm+jMk1yN8I95P/9tc6pJBzIhX05rZ4\n6Yhz4WRBCBnRVNgSPVWxC5QYkP1e/Js7BXDEsQcqrFZ9BsNOIu9COOly8aTd\nfGPMB4fZPGdHSYUnfbIA5R5JNMxxgK2k53io6SLOgd/DKAzVjhVd/LjimU0i\n2fEy3XgE5CeBoxXAaA4mx1HaNfRqym5I30GQNEktsxriWRtstKrQ/+lCpdiZ\ndHjHi7SgeJ4orS6R/ll//0OOrB2LAXrb6hGDr1+8uhDrgnOr4V7EJ5BXqbca\nh/SXDh2jEQsi8CDvhi3WoPii7f3UbhBRMn+HarTSIQloAbMWl87NfsnDyNUd\nha8ZQPZjqWfdqxGf/T/msimDfaUYefP6oLsZ3LGDp07hd0mu8ZABzy6WtVmV\nk2IkOD7mtD0Gabm9lN92Fc7+xunZh6BosnTaZLzqqBJoRyWT+ZKR6kEY59vb\nTYUsFOhVAm84f5mteHqSc7qtCDhZ9uIhRDg1darpS7NhIR7MkU4T51rxrIpY\n9GlJ\r\n=lEQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSUGduq4TaWtvVpyshNzSuXFHADd3tkMfuVJ+JJwmzSwIhANL9kKGdE56icZXfCKD26+Squ1XxqSbjeonRJiuPbMaD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.3f47ae57.0_1628791209546_0.12059712488220709"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0","@material/touch-target":"=13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WRi6JMSLVEGhGoUQOtuO2oen+EqWLBw33aVbX/EgEStxxkOqj6DiYycLz/kVUM+tUWcKjNjpN4fgcJU/OTdwZw==","shasum":"c298e3f768f332b0f0006134c4c30aede236d958","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.6b9bfc32.0.tgz","fileCount":15,"unpackedSize":83259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdSCRA9TVsSAnZWagAAiFYQAJDWxvnRG92ZTl2rNheo\nfIWkZLa04/8XDfRql5j1p/8XGARvuI1v5AFNgIt8+09buYOig1s58ODPakha\nDmqrpePjq0C9bjpgIo4N0sc7byd5+812tDcEQU7rMtRscRb3r3agPg7KxqvM\ndS2KVl5ojjBgi6ONdONFoNLY+LhCFjxBTXuMw3ZJoxY0PzQw02iA/W2kcfE4\n9+oQIq2zjOQxTjd+JfEFO0tLMXvsa2jaXhXxXcwxwqol6RyYD2eHKfGI8eq3\nZp9noV02xAF4F3QndTagTM2892GUxpxwgKrFKU1+hvKKotTa2h3wZ3HLDv2c\nTgJw3bMzzh1r7F/hZOcyQNA6M9kCBRJEa/Rl1Rt4TUlVXtSQMYlYU6v3xF+a\nA5wjcbCec6HFbuVhXouxpkhay0g6uUAcnNjgD6cM8chR6MMPxvyGbF2tF1zL\nCHU4Fw+ybM9gPTWd2LTYtVNPRIrRxBUdv8ImVfCaG4OK0KgZJjuQlMcWf0gq\nNGgVSKB4Zu7QhdAG0Tti3Z0RNoi3YoGV/+rfJTJNafqTnvQEpwmhsP4ql4Q4\nwRWZfJhZl0KgJ4UPiXzwf3nkCRc/3Ljm9PWz1esEA2/CKUq0cQqvV+Fg4e2X\nCL6NoF4/tRcwp8Q8ksD51PHXbwZVtKW3SmBf+noSYLDrBhO1JoNnEJJpgEZz\njnte\r\n=nOKo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHi3LKbtdSrTO/8zqeq8u9WCr/0zwOF6mFe/cdAOnX21AiBu1XmfHKdbwO8T01Egj4JR/UPKSr5BKZXw3unzD18MIA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.6b9bfc32.0_1628792657863_0.918170673571999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.c89ecc63.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0","@material/touch-target":"=13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6E1FFNJF9amT//ITq1CGEPgndlun6cf1Y+6/MV1NKG+NS15QY0SJo8fVAI7aDP/eRe90VTt1ZeJm/xCjwhftYQ==","shasum":"b018cf7de29ffcba091ece959a6c167a8c6a3277","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.c89ecc63.0.tgz","fileCount":15,"unpackedSize":83237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2RCRA9TVsSAnZWagAAd3QP+waFoxVQA1iN8rlZ4t6y\ngqMOdo181wJWCaaL79SoD66I/u1+xLsRYfnrGtCW3Dblc7CjfPYnU0/j9IyU\nF1vt2yEaseH/o1/HOaYzAeoF2k9EmQafiQl+w+BlfTuhFubu6iMViJbo5xh/\nnamw+MECrb0PeOIqf1m5ZUd4zCcgvPkxt6wjqG0W7SBOEo/oYIK9K0Fd2xzM\n+OoxpRkXPnsTRdW1zGPl3ZyoH8m+sCmmajm7EQLQoRHnSc8r4LW6QLQX6TmE\nbhW8qT1BLQ0LPp/WebFE3eximKEo54HfxrRkgDaSDCWxPYNtWHSDV662HwTz\nTDiX423APiqHmjt2FP1ZGylfVQrmZ0tBj3NVA44ueHbMmDww0Nv5j21ljybS\nfARTNg+mgpLUg7kL0FkPx+fm0wHrvlrbg8YBFDDvSB5SeTTvPd0PxpMKGaWY\nxtmHm8QAsaP7z+f5VA9nugNgWVdB0Y2CyaRAKkpZie4XfSpwR9fav0os0NrP\n+ogChTbWGrH4bTGsTrMz0utfjsSFexIRxQuGiVCaChJfllcantBbFLxv5Uf5\nyFDSZQM+KwCtdapSHAzBfU6gKy0EIFYJ99OxLr/a6H3DIRlcCy7oEQfClyvX\n0Z/n1ow30lDwd9Qpv51gYOOGuUTOM0weBEn+t1mlfg84kdP/ijiduv4u8UOG\n8gQl\r\n=2CDK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAHJkZB8T5/onxBbSqeTiyEG192fbTNggfNMYoZB6sfaAiBRjyTogcPcWps4Eo6TwtE1lm6X/mLVcFwQOm4Jsd/SUA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.c89ecc63.0_1629134224917_0.7464243868412948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.59de86bd.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0","@material/touch-target":"=13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3IlpiPwO/8CYwqoVv2gVPQwqkXO2QCkDnNdk2Ar4CvjlJtLGs4dI7M0YIIohvyNgtDBJK2F64I8QC5+ddfdwVw==","shasum":"73516039b83e30b6cf4f8dea329cddc9d5bcf937","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.59de86bd.0.tgz","fileCount":15,"unpackedSize":83237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSXCRA9TVsSAnZWagAAZxwP/joRBdU8ZFb/TMDlrwZJ\nE5IkZpL2ip3EtTojQZ2VzhkNz+XftMXGz/jFsJEHPFZYKMnc3pNfGKX8PJPr\nho+u9ijZeHozTOXPwPV/bRgBK8BIMtMG50Q0P1dfdLDwD7wGvNQ7zqfYVqyR\natbDzFY8NDuG8DgmphqxSfil1FWghZY4uS+42AMYkHfn+7SPcmZzfLI9VKQr\nRCPoywl7dX7m8oCCgYqb0xLLRB/rmdzjgkwqiPLC1E3bO69/x75O6aIZ7x/T\nnWAGGdfAhwQ4c1WpTpUQI3Qp8tzrCZ8uG/oWVR8kx/lJdKhldDcKeHhPKHP9\npfs3dVMzH4Q1XPITk/xityPlxL4Qyp4Lw+afw1l7MRy+ywPHIQrM36eoil1+\nJ6yO1lBnETO+FBlejACwphbjaMRrFM/Ycz9GVO2AdtcBOZbpkQzaPHkHq4PD\nCKle5koB7f0u7lBRTcRX4I4K6zlCZYz35ECHGV4v6ihJCXOxk4nKB7VC1GW1\nwvwLFQBl08RgJKmxp5lLZ7fv7BEWlsXrKkhberxVswweDuT71ZcTBPqTFGUJ\nu7IT+tcdDIjVoboFi/xcTPoHvwN8QBHduf1IFoWjfPjBYsQBeQU0dnwRPjJp\nH14x60I+yPQp8wQKEvpxrfciAM+pSAcu7gRTEnOPq90KaJ4QeJZ2C6msQsbw\nrb8M\r\n=ZL38\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3PUkljotVxAOyzy62XevxYgG15IxMWGwIwT4SdUww9AiBsttNlvEsx9JyrTmEQdO6bw2i8Dz/vGI2dE7aUnySePw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.59de86bd.0_1629250710957_0.10544397825212104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.dcda879b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/touch-target":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-components-web-components/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QyT3ov/eOc5TqrpxWzMrlgn8Dnjjse0D4Sn+pHunSkQecLenP+YCp0Ypw5EVyaGm0TDyYjXTE5g5VuhNVamxsg==","shasum":"2864d1d21f13c2748e36b3b13a76a49bb9e33424","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.dcda879b.0.tgz","fileCount":15,"unpackedSize":83237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYheCRA9TVsSAnZWagAAniIP/RLo1PgNAbbkAW/IMJza\ntbJ0Jp6/jiLI2NQxSgtp96lDPPDN/Ulf5pyYC1JFq0IMFAvO2XNhk3CAxZnc\ndnjH8lbdBz0a02PHCT3CKDEqB3Z19NrYwZDwUTgQUAXjjwmTiWAJn5hGrpcN\nI8/P0MY6+Qti9nysR/xD0ax/aSkt1Cnhe80c//agSuHslbUDZbCdmaXQzAn/\njk7pJBHSqlhthOFMfcxt/ouh+85fMSBVHhywkkpyjBJiDSxy6Apk1Rd5spS4\n9GnaCAq7GjqaXre31gUDo3Nima75yqcTeYTcoPfitkteXP141yu23gnxoZwc\noFRGP9Rr9nxvI9BO+/ybU8FvtaEbw/czMimrqhkmQxaIl0wyAWew7Br57X7N\ngw9J8VohDgEGD2ithX+DHehCVb3U1NAYk1iBQy7MYGlcSbgMWno3NYahfy7t\nNBT3wLPO1728GhVippClX/j2SjEpPefmlyj8T64DYMdYPA2SHrhTtbwVjYTX\n1ElcU8kmIHlUkhOeNbjBZ7qenIOlB36HeyGPcAN6cQp6pT9Z10WbdpMdNDQl\n4jHBUYVhcem9RUvAqDMv8igehJRPC7sPKhuUhatS+HuE9Ebvs7QtOCi0Jxei\njGkdSMS4gbLRGMdkyPcG1hybmHNoHm07EQLukG9b8sAh9Lh5XbsPSFAuM445\ne0H3\r\n=rTj/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkUmoVOMSbzK3RwsyCunwwAScvsf+pZW9NZC/BAcpbMAiEAkbXR6MnrzJrwB4KRthFittAkgZBzttKwgClGpQrC7gs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.dcda879b.0_1629325406018_0.9613700589022718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.dbb8b366.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/touch-target":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VRjXURpLldOEqqxo8ejmJjOgCUGoSIqSewZjX/vThxuT0vkqZUJ6yIPvoDr3+0EEgCtxG8nH0FE+C9v8bs+4Sw==","shasum":"a539288bdf69c6ad4fb171bb334f3a7b90cb897c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.dbb8b366.0.tgz","fileCount":15,"unpackedSize":83215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKMCRA9TVsSAnZWagAAbwMQAKH+LAj8YRZmEZ7hvbVG\nsjz4758UjB0ZTAiv8q2+m/A18YPwg+UDJb2C27WtXxquLN/GZw4Vgzyge/RZ\ndeD8VmYiJrAArwpI/UsuJNPlhmvM899ox1oTiwILUhb66bpdlsk0u1vKJrJ5\nKxuoqxoWbv6hFXXCFkWBvBFg7tEizPCZQ0yjdgLCCydEeh4QUL8t76cxbJLc\nFpiaQtrma5oHxOKqHSQLeBT8ZpwGzqfVPq0tZHxb4ITmY49gfW4U1Ny8R9N2\ndOu3JTwIhEGktsAmSXkXQobOxHavvkbdOCiUwRu4ji2qQ7/azX2zFKIrww3v\nPfe1GQdNh3s0Bm3em7NH+EExK44bOsBcHxpeNeJcKUsEYOA/6pdImGwgA81J\nXXSvSNxKO6HCKGU/T2CaJFqWO3aUuVU7bWpxLBy4XmaDro4wkHXnmhjRKGd6\nRSeFGYy02cnbNCFu7grOz9+ARtpD+MLPWYY5P0nI/rlNkGNifzahGUXnadI/\nH68YTJT/sZzXD5baHTTSLU6xXEeHzZ4ZnS9tITBNYDqxY4HwfXaSewRDNLz0\n7j8g7ClfQJolPQLohhCqkVCEvLeXZOkjGrudmj96AUkoA/oprZcPPnkFrxh8\n7Z0VKK5rp0Ps7yZSxg5YpXS/lfbqQWZu2/UBgifb/V74IzFZg5OzafS+J7AK\nK+JZ\r\n=Kcfu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdvVqQRDifArfY5oIiOSFxFvfk2UNSOULB4ZwNcY0reAiATiKhE8lI6zmOKkI74FC04p1v42edudP2miCqZkwrtlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.dbb8b366.0_1629414028660_0.43610765319201694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.c6e3060c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/touch-target":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S9nZUasXI9t91r35Z9BcoZkpYtQgd0qM43pmYYPGBELMFCTsHL925cM0xemJOD5QSj8inlgOUe/T1SHNqxSkfg==","shasum":"bdf48b418d5714df101f18e8060d028293b1ea4a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.c6e3060c.0.tgz","fileCount":15,"unpackedSize":83215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuL7CRA9TVsSAnZWagAAp2YQAI276f3KUGKmniml58FT\nlcqDPZu81J8rPdsWBsUri53D1QgR7y8dNocxfh5QN6282Rvwz+wMyFF4wQ9d\nKi00TZhrods4fdrDQqrLR5mDCdG/adseYazrSG3jmLwBUAZ/yt7lRloaLvdJ\nQKLJwD7uWQzzo+lPKwcwPzPb/a1COGSvjPTj8C47yuZVdXy9/1dskUouzEYP\nM+YxxtqvXf1zGfOG9a3oOhw0BP4FdMqUZfayXZTUGAviTK/31CWoc79rLd3K\nRcsGd2IjRg4hhtQ6LEdVel7JJRnzBaGLxvJoydbJtGC58qqqlrDlRE1nhcou\nAx7QHIqMV9X/edVrbcSBAglwLkm0bexC9+YYHTxicBU/iwgfSbTHVTmKOkGt\n1ILq/d6XUJ9sDx08gVYN00t+l2fl8l+Rtn6r8zRf5zGcbmxAK9/kcHmT1dm0\nHU6zLRPsCMQWS+D3Vd42FoslCjKx6MeqsI61cyaX0Ppx2xLBb3XQJ0XP1Eam\nuM8CYGWeuazFDDMyYXl3sVtGe8JS6V46OlmRitYmUne+E0U+qQgzgISW2nvV\nJ5+lQkhUrQOT0FVrBR7ytduEyABu7Mwg6DCsmrtQWjUEUHg4MqiGM4GT07/5\n+/FISLB81ZoFBWjJG9UFdesspG44C6SR51+0/pSXAK2CNI2go9c4T/0FBVYf\n5ej8\r\n=3Tt/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGm/uPnIcJxU64jCj1lN/xWLgxFZT25dy6Cs7JMaEp6rAiB4JupVPDFALjZ0CKIEGs7Pbq01LlLmubS5qGyfT9aERA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.c6e3060c.0_1629414139420_0.8514356185711758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.03120b7d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/touch-target":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LOeMoIgxF2sG6pOA4V9jQQrdAOsEOb9v7fRQ3bkNmZKSLHKH2uRN5bBRjXdFECJtu/xhZBtq5ohqodZ90AkR9A==","shasum":"b8cb068fdfde5b17570792ad0c1b486e1fa10e98","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.03120b7d.0.tgz","fileCount":15,"unpackedSize":83215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbvCRA9TVsSAnZWagAAfRAP/1ivzSKih9x3ByucIF8W\nCfkRaA+k67BcIXwKB2bllAwE4WHVTcy/CD1A+iFZDLnvISpQmHRhznqzR4bo\nCb+C6JGeGGdTSYQc2A5Zs7QYxrfaBIeusN+N3hjYeFQg6jL1hUi3QBI7BnAS\nx1+58AJqmBEbHqET3DxtApdCoN/boy3CLE2QOBvCIUCw75XM01NXYdcIpJX/\nTM9MZx1JS6wFHz1avzucNpfN+aullYiOSpqsOdTIlXdZ9GKaQQigZcCuLdhM\nJyAIF8qVY/EbWkkmMkKP1w4mSQG5ntVjRlKX5Ilq2FxJoAtrKooDPLEdCPHP\nrf6Dq+XV0YweYi5iv+MTgEA0hlZnghiTjZ8VuN26C2qGYTBtn/WA4p8LMLHS\niRurI8kbulnIATzhHvoGfB+YnuM/Sb7Jq4PyRyZPIsjT5a6wK7nI2M2pkb5m\nlUN24a9+qNKZ7aJkr46QGskZEM2+eycEgTfpzPWsIMQW2HU++uw9WmYvIi2s\nkR/DFUURlK8KSD+I5DMnrlzyLE5oYesfIVr1hGlKTZDV/zJka/OTWuxCHw8n\ngvTLutZMGz4sVSWEg2cq0vZi9cAywH0QUCa05ewWUMqdgzvO/1UUbWpf0iPM\nTmzA2BOKisskOG0ed57rH/VcZPmQaHzYEQTFRXmhSg9HaM+AHo7+cWmV2GEB\nl+jq\r\n=VrVZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZQte2wx8jc0k8txTSG/JyK2LkGJtRueLwKuFZrBVvfQIgOJv+jXDARUrGy+vKiYCWbGlH+n8zC9qh43yIGq5YWlw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.03120b7d.0_1629419246844_0.4288508835006384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.d75a5f74.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/touch-target":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AytPULyCt1X3v9Q84A3SROhd3pAGesa2u0bAn/u/SFSEB5dzOI9P5CWZcEaBJ3fje7cTqdYpletccVSvr+jFlw==","shasum":"b45075ff2f65cc31ec75202b44db6a0d9c7b5b14","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.d75a5f74.0.tgz","fileCount":15,"unpackedSize":83215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AqCRA9TVsSAnZWagAAQ08P/3V6gqme0eZvlxRy7YPz\nnOZizKPlWCJqBajIpCUiua0EHyaB3KJeK8yxp2w4MaQaUgtCCpD3EVTgF8s6\nuHVhk3ijFRDkpXMk5xWFT7KlU3PNTN8NN22chIolmmkRs14uJLTHxqkXx8ZL\nJoELhllib8Zh8Er7mZbWGA3nwGIDUCglEuDhMJv7vPWkRh0nQ3dXZbZmIQ2n\ncpoS/nL6wJcPzDMztUEDbA+ZvdK+AMSVUzTaETDcjHAHm5s+EoQeuCMcRat2\nUt4B37KQALHIq4nRrr5YX9xpHB6p2KXn9w/a3juGwryIe6vZQdagaurTNvo0\nTL7cLqL9mJh9xP/yw/baERe8s7AKOv9akHGIqhspu1I5WPsv3kyFoA1gJ9qI\nf+SToGLTM8WVq8cIKIUXvJrfUpACTRWJ5+Mw+naiyf7kFmX6kmRkM7Weg6vr\n3MelQr2wy0P3EtF6Yix3kozJakWyPzadCe71GfLH1hU/ZAa84y83brXqNntz\n4yPSFfIh52WBXETEHGoeZbBHWFgYitqJldKKa1hjivK/dJIMNUICQupVUzAn\nkBI+XYyMCy2XleQuOgBxQ9xmLpd3cPodQiMVmwoFxr63TUCKIcJbepDgC61g\njJteX6HIVCYZE7k4/WEpOpdHj0ZUQF54L4X3Z1lF9BGycFDQEYY6l3sNO+Zh\neQjh\r\n=wPOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUD6pE57Xv0MNCbQf8iiCi/7ftCNYIFNI/r6LFCTfzHAIgeHGPRNpX4qYvfSgBOSiXOrk69zWAEX7RlVCPYGewwQs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.d75a5f74.0_1629446186306_0.5006245499084294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/touch-target":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZU5TS/LmtE0y638BfsWoUuLpdoI95WnRZm+bxiD3Oi3aWJBgRPocLlEPgdz8i5I1kAAP+VL618fPaGCOkbY3og==","shasum":"9d56e746af53fd1872beefa3d6f74150751b24cd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.3d79ffe7.0.tgz","fileCount":15,"unpackedSize":83215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+ShCRA9TVsSAnZWagAAAeUP+wf45G/0w8Fzj51QmKtA\nWa5thjoIzytXRc3WeN30u8ZThXTUwISAKSuiDdn3ShaxgMwZeh0wjsJ0ODCM\niFwD7Ia/NUQ/nVGlfglACawszAZPsTX2EyjHjwQ9yztxP+vgo0eE6HeET0M0\nn+JuHpXvW/sSXUkD6tzGh3LKuEAh1xrJw5ZblIGtrV91WE0udrc8Xs5uG0NE\nNis7Ox55qzUZh2KqGHhRDHb+ifXT33RZPltbnVc4nn1NI1DSjhoePhawvQaQ\nPKOmYPnZ5qpmjb7L1agalg+q17ew4HYk9hi3pfE8MHI1BSnLm//iqLvCPtIR\nXmBiDlGWGftxikZs37LgXBQZYXmiZC1ULWPNeYcA83cfPLicL4XylIIBgzAW\nxZzuI1qrVcBrZ+OuqcsymZpMls2ZfvGg/dlYNVmNKaaAsE3CMqyd4sPF6Egg\ngxH/zOZOZjvUYsSjo3PE2svMNKW+t0/kiEA0rhZqeMkLimzduUyW1vm6GFrd\nhlxmBGuD2ud/NyaeSxgvRUqw4XPgu/BQ/5qUVTk22ZD7vrGYJdq7ePdLSr/s\njSss0mPcIaqd657+xp8Qvd4+5ekLDRxDLVOWrbfDU8qglNDEgiQOyhkjh/YJ\n0kbynIZyeUIMuLEpxLTRwy0ZKNWlyHhs/u34+0BUkZhbWYw9WVcHg9zrTVRF\nOjcp\r\n=3+SL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqQ2hI8xxfvbWAgvtcxIB+A72MTQFzgbyjsgcYt5dvtQIgYIckNHn7pLcmN7ncgGT9QGDx4oGQa7AwIku8sw5iMic="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.3d79ffe7.0_1629480097317_0.8984018478102653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.02213ebe.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/touch-target":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xnZmk6wV2/nvRX6FH0bkDWCI1OPZdrhis8LwaaSTo8nuBbC+dBHf7ye4dCzQbTmtiJ2Tt+4mb2TB21S4b03Vtw==","shasum":"99488d427679e03ef7a4f246a5b09c9e2011237b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.02213ebe.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+W6CRA9TVsSAnZWagAA+8cP/R6pIvHtkA2M1c1N2Z2m\nlFWHZAO6gLipxNpx8uCHRnPdOm0RVnEAsJJF/w3QZAAHR0LSUasWbuxgS2BA\nyo1ocKvPX/RZQb+wnvr2qUmqao0Ph/rTMGCGmEymD3Fr1m+u+ctdKxcmJZrL\n4rUvu4gCDW81Z+lrxNN9NB2bfJ3wcwFddrLJQD2qcEmeRkMc9Z39gvdh3N1V\nS8u/Tk2ECW7sK/gGn4A2KL303QmNuPVFBBIG2ifrjw8Nyili10g89P++8K7j\nOAZMex6XVKEeTSliRrTEW8soYlttzJ6TGenLo5V5Rbeod58BBdPHtnzd6Hxs\npgorDckrruhqEHi9kJopX08Nz4g6N4RO9PAuXHyifB8AF/EBgs5LC1f3u0NK\nNCT7/g8vQUTSklWO+FJYa2WhhY/byMjrSLjw7YAWQjFFUOxVH5hYx4M1A7F9\nMLFYk3mb79JV/ORa1haoD0a7ZKNj/wBLLdKLBi9GaoiCf9KUU6BL7qevKcds\niaagMq4OO3szpsiO+CBLY7wFDxAVpTZgRCaGAkphufuqQ2j1Trp/VktdMBLj\nN9u1wfDfS/GPg6TTnFByiXQCUXuyWHyZMfCtZwy/jQ7ZYrTZplZUctZcTJzu\nPPxYumGoRHtf+ioEDSenzNJMOU4X7Yqnihi7+1EhQGD3SYNv9mZMjFjNRHrn\n+7el\r\n=YJMS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgQuRn4CsJBjGXyK8DTmoK25veGjIy4R24UrOCVFHMIAIgJ59kH6qiej67xUvdzepgJHo4RW8sxIX2GuRLy4PO6eY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.02213ebe.0_1629480378814_0.8461928366351013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.90a999b9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/touch-target":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I0Wdrk9nSW467OgsSBNDiY9GIfr1MDU8H3iYrYXNVHNqWnHtCzCn0N0K2Gs5Pes4q4JrQxfXFYzIZbw/XemkUQ==","shasum":"d14a09f9d5e022dad32601a77b5049440810b196","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.90a999b9.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/elCRA9TVsSAnZWagAACiIP/2MTyLIFvImeEwBHkebH\nwUeN0lZU9QlTVYtewjnU8HcNWlFpUsz0Ihuh/4RufyNHselyt4lKoVAAeDaM\n9UcLYBFollHN/fN+NnjxT9Uj5uIhh4S05ZB6KIRmjcw61aRryAeB9gOGAXW1\nZjr4jrcnrt38WHJNs/vtaUVlJ32GaqN018Yb0Tu8bzI4ypvDcRsmCn6R1FBX\nFcUyJsdmMFsaxPMNLW5nlQIgEsHMfH3pFSf1HMUYmGqLvfVr0wW1jca/UuaZ\n2bAm2Vwo90mtFZDpxgWe6sdWuMEz470axJN+fZjpc89se7XYO5UA9UPb6jFq\nVVP6bp5N9QWpU0Muc9n3i8LQOlaK0do7KUBqkVCXJLAiZ7Jp5ab6sJIMDIfZ\nK7hTfivCs6kbRGPdmXrD8LIp9DiIwnAOeRJ+Vw8XYcdv6spZdg1xgKzJwZEZ\niNLr1NcApl3Kzo0dKeNqey1ns5I5ETigIUjXMYHkgT5lmzOk/9Jot9zuL2Zm\n/B8et1You2ee5lP9aKZfGDul4lXGHNMgcb1M+tzpPJjNaXP2+ga9LUHitqTg\nHCacOEz/1pzRTFc43SvC0foVbFeyX69p0yXVEs2b5IM+WwPSvkWxrn+L1pro\n0NpnlCJDIHuarw//bU3C9H7z584xUxo4NRORKrVvXXnw+lEgFZXedid5PoA3\nyhYb\r\n=aNwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxw6vxnWaJymrDwxlK2anhMZpngog18QOn8VjMcGrVhwIhANNzhLQiDuxwesh/2RI0iYIJD24XfVGfFfsDfY+YbaOo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.90a999b9.0_1629484965704_0.2066876887401452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.6db58716.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/touch-target":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SpP/N3yRTBLIefeQWcuUb9MFEFqx3meVGrxmcKR46LgbSqduOvRSfsIb6ARjN44K0ZnCLHLWEb3GvolUOk0Tcg==","shasum":"fdfb7d99ebb5adb5c2ee840715e17dc61144cde0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.6db58716.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2V1CRA9TVsSAnZWagAAtxgQAKQC20pEumM0OOr3gXPd\n7a7hldRAmHc42KYkAbWSjJwlQBzdiGdLcFBMQjMPqDRGkj65xBVkzU39/v6m\nZHp5HsiGBldBSKFUgBkKsQnaqcah8rpw/cptskDJ++bMItA/sdo/+FQljqqr\nMpNOzCTvrpCHBmP+yDkhSQMYL7moeeaS0c38Sz0ihKqOz4cffw4YN8QKgEr7\nRzmddesvESKmA6+aI3ElUCkp0kW76NQa11TpS+dvTLmw4tB3NfBsHXQioEoy\n8w3TOOlL2Mz9N8aQPk4Ro+dFzaAlRQyAPvkAVeJP8bgFbIkNcPzn1Qfdq9LK\n0u6TSrWkDrPK7d87aOJVVuETY2rUIvmqjs3GZZ02yqtvljuwi6/GpCO8S+Ju\nnvVGsIoiwEfR7eaXMyHIV+bDFQdBZIhl1LLHj16OQvsCybsYPgRp0M44jIke\n4JzezTo6oPz+yDcqCrFdvVm9HUhX8MFnEvNH2wJeMGmXKptoMnKUAvvGyqxP\n50ErC5NLU0Yq6Qi/Srio8mM/JTswAkEAwSpyCaaPkc8Q++D/spXPsg4wtraF\nfdfJ4ZAlNeHKTal4zsrgnxCRwEyhSYKggnGyq+h3ktRYNjDjZHfjfOjDYqU4\nZL81IXWI4geYnfUSYeHaDz5FkmJwDMB0S4rl1OT6exGO27VhVgln8wBKDnnu\nfbKm\r\n=YOEm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuKwLgCvO6Gcc2flfzkcy2O8IuFJcrAwyt+MdjxwSqgAIgJQPHyzhHjQRG5EugBlL3pj72v73EODhuE2PuePYnFhs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.6db58716.0_1629709684866_0.7160483199241361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/touch-target":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oTznNJz0xPUHKTXxVqtOfubRSJmPz5U4C0t6F9YFCSZCUzaMuAbGqaPX5Bt3MrMvkVeUoXd+WF8EJYiyw82zlQ==","shasum":"806ad97971b9eebf4b297a4f99772dcb4038753f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.9fb5bc35.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYvCRA9TVsSAnZWagAA8gQQAJhRZfxiORKnR1HlchYN\nrohYn/QGvrq3JDp/NHHM3nAzCDUINI+lKBkhqJ1RLbpf/T0Rdqbh5g89gT5e\nVCZ9Ss2wp+oHafcuK1IQ/iq9WkHmXlnFihrbia9xemlQWUbhz8cRwpHzxfz6\nLWP8i8TsSzk+N2753aVBob7IRJLHYFP3zSplaXYhlwaeE117YlgoXy5xJKX5\ns+AFAS40DX0b8O6S1p1c4JxOLzb7YFX++z950bgTPlZE8+CGP6cktLUMHCMR\nuKviVk4h+e2q+O3kASLIOSu3gXY+Ms6EI2aovWdsq3ZUTnqs1jMKwkXxI9oa\n+72/O6E4lAFEayqI5CzZanxIeD9yqrIiLN3cYxE0Zx1LKQ07APjAoF0mqGzc\nCFksfbrtZWHMseyd6pYY2IUu9bywwPrISCKlliGBqh8VB0S8xnM6N9Ni4OYu\ndkV96iBhotUEX1zbwi5/2CrjLYRsUI+kWK5ypgwNAVtNLaMtBqevI/1yUQgr\n7YXfYsJsk757t+ejhFmYboGPAKUqaAsuscbhFt0d/YnH5Ws/ZBOtfFoaAFGS\n0zpSp8L10bfhn/tNrg65/dl61NCEouYTmSO9M8UtfA7dmQTgtLEvOG39XTAW\n5dlQ/0wY7FB2cUt5+GmUB0/CIHDl7O2oVsc0v4PmaZpms0gzJ+8TQdFD1soS\nSyKr\r\n=7UKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCJKiA65rTRVm4dwPst6JDqPPmFsj3gQmYo1fmCYh0mAiEA8K0S19vyh8r919o0CLpGE2HPmHTr+dy4p2dLJBRFoGY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.9fb5bc35.0_1629759022980_0.8623362053679742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xFNGzhf36uQ3yLFXycEa46Q4GyxjeYtiO+4ZkuKrgnW4zo8iGsuiIwYbtCZVwN+ms0UPndYhXPSznDvfSUMbSA==","shasum":"4ce89c5874ea2727cc4b57018fee4a920065ffe3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9YCRA9TVsSAnZWagAAAowP/3dhy9imxJDODjXhpy3L\ng4t3hfHYkanRTJVLzaLLyIPWHFi7MB+UeyYBDYPq7jAq+JouDBLjCnDLgd74\nDkjbIwARGzEhjOSIvveGl24IVXCkyiYPusDxX1J3dg5C+YowfbZoxXJGtgem\nCKDV0qsKZkBEFTaFYDmPj8WDGzBU5xA0BK4CcugIvSqKoIcw0s8LZv3F+51y\ne7kHk9Z9mmUBPEGjqxljGQpx69RKj0ELPX4z39XSKqrgJ1JbhzTlpuOsz4t+\ndna5jqDhQeYDOzTDsk3gljatBQsmC1AB7GFkVm8EWrNOhSgwoH2JoBKKsWCP\nFLJEL6BOVWCxOlGHTISS2cjM8LSNZCIHl65VY5sRXUD11WMchJABihnR66fU\nWBOlWMYXTze1D91JIwlDDwMmmqpeOyNo5vyKHU7euChpl15CoHgSJHTjxFFW\nHKKYMtXzdy0c1zhZ7DErgO5JsYhMlZ5bvM8OhOJuz6p37Id1XqnumBceHPxx\n1SlM7Sh1Rnz5ZRXFkosUCrfmFO9hb5KMPVK7Dbmr/feFcCGrmUpUSlQHLSOx\n5GfDwQUz9ATpS18DzR52Sur2XEaBNa5xMc2IE8bvSWANBh8CEAw6jFyCzqt9\n0DbeKVMTCIFmbnXa0phhvAUgviFhEpotF1QWmZKN7NinQK8MhrUEuIuuod2h\nOs5j\r\n=P1d2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW0Vdm0MQ9Q1gDy66f3vYkf5iOgCgBM5V+mbZhtZKKVgIhAJh2UN6GoPoFRjW/UUxuBy0YLuItnT7SSOorWBj+6Xfe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.ddaa5d8e.0_1629831000242_0.9649321546651999"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.756208fb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GwqvcXyp+TqrQvSoczvGCIw1/1D7mw164iCygckhXaA5SQJKuJM3+FwjXCBnrHUGd5TWKIg/rP09aI4QMeWAZQ==","shasum":"35e5e9bedb6360fd01bb3f9c37075e65aa9601cf","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.756208fb.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8XCRA9TVsSAnZWagAAzc4P/iRUARwJP4A67TWiZz9L\nDxasSoijKsHEBCI1bpjLDyOBBfQX6ovMBZ+tT6QEqp/mgP+9v5SpWma/2GVv\nArz81L7yNuic5uoRCw41PorK2AIs/qj7PZsfyhchb2bZ2ML6fnhlNSV08PmC\nFt/JyHt/Px8aCmfvErnz4Q+JSZIymyKLc22bAY+gO0DR7Qu4ouivrH/IsDu8\n2rTkgi2P6S5XYuC9GyPSw4dfafkFfxezVgteak8wPU/zll5a1uNS4xIYORX7\nM9eCcklH05dyRzy99NKiV+AtixyL2asOEFb4r/3kzA8PM7bIChNFkO9lgiMx\nf4scHEkr5NTIl3D6flHFNjW01aIiQk4BSdVCCliZ7vgfVn11GvAVN6GDsGsI\n+rVIYtVCTfd2i9L/sxGIPb2hpYVV0yzkqnBBEy4KGFm552L/LQ17qnL8hugk\nWoG3FwU0RAqwtmTB4i+7yghC3c0vXvBx4ZM53DyEilxqnD3DQilawZ5BsXPU\nlIGHBemkeoPxvD+vnTtVQaIZ953pA5MxhMv1qk130YIZd0jpCd1gyUsnaKLm\nhR68R2/W/BChcyxrFlWQV8YptuYlp4+HM/vrr56gs0UFh7CvBj68+s/d6+83\n6orIjvNjY5G9DUUFhkKDspg6KmbN1otAjap5raFhEXMTMlDP7B6kfdeQy3KS\n/gqj\r\n=BKZZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8+0GBQzCcYQyXeSJmu8lyFOz0mFzARPHm0y3gy6pgigIhAJ7hfPd78BRW1l3DaFizL4HrSZbnkOGk9HkrsUfvyjgo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.756208fb.0_1629921047532_0.43453302515238423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.9576dcd9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VkgnzxSaBvpEBDL+2LpHSQU0Edl/102wzDqdcr+jMwElhnOTNr20hqBaLJPvkJ7TyDC34dJM03ap44tBYa0FJA==","shasum":"9f660e79c6fc2976d339ede3923cf7bad62fbc06","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.9576dcd9.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmmCRA9TVsSAnZWagAA8GIP/AwxmgebBjxXzkFZmzZn\nTKMuaMhshBtVZ+8IcbaEZyumF8DQ13nlpDKNIrlOcyjiRb0jl6hU30fI9cA1\nXggFuENAhy5s+GHjwjC6CLF4mvssKfYnlO0zgskCzioYB+3uh6R1VGejx7fV\ndNWqjQL3PH7KRI3tI4PG1i8qzgKMNq4mE+C14lZlqOPR0Sazv8kY39bXxJs9\nhi1njWKysKDUu7QrDPeOgQ+6u9rzYUfZVB6FhUBhxJDnfxK5C88xbFD0JiO+\nhiRin6fwOJbwhQ1IHq1PRD0dSzWLLDul5asY3j138ZiIiKzjBZt82ma9P3bM\nQGbkjM2I0ulqv3/zYlla+mdOg69+jchxtZmX9kYlkDTtoclA+ejedxyk/iBt\nJPG4RLNsdFJtT0CpkiyICPtTIQe2IZmTVcibWOQWMYAhiSbcMpCsigJ2woAG\ntcI2Qc5S7es0shkSwRnsGLw7qgwWgpHmdVO6g7aZYsL7AW4ejtsnz3MKqaI0\njhPWpNJVFhkmxQFRA4U5xQ5kWZMpMzjsMwOzrNu/Es/tzuXEWE9/54/bevNc\n3/SCkbC/6RsopOOJgqHWJGHV3S0ApZi/LdIjZ47WvztW+t8bGkcYUebyzF4V\nDCbsIj/Ejv0XSdTXzkp2LQ8HUdv8YIjlnaJIUmUX3QPbEnJS8EQOdYT6zsyG\n2f3D\r\n=wfKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGtcSiWv5CkSaJXqokZmwEym+smXcVFDUqzKp6vSTkJjAiBTLDIJEojXJEC3a/n7xCI/sMLyGiXLoWPiaQmoVVXtVw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.9576dcd9.0_1629927846177_0.06055093156235469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.7531cf97.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-n3bc2g0w70SHIGO2ZFca78215HxXDGfK2I503sOvFenkZwBkA9djbuZZwI2g6sp2UdnFpzyrvQncLGwMp1BPVA==","shasum":"bc2accef9856bc4c0530d978d032c7b024d74f51","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.7531cf97.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ868CRA9TVsSAnZWagAAvzIP+wWl3lpfyzt/iReus5bh\nuVwdaK6kai7r03e9lgZ9+jtpJ4tMwXvKlikLcAkgmfCvQCWzMMRdbUjqSbVJ\nDf+3+HzToDx5ajo8Ny3bOvpGPrHMlxh9nSTSq8G9XRgNWXwqBCt5bG+HJjeo\nripdJgikK8sRGriXn9+fgknXZi20PuzMADykRtKvG/a1lbDqENbTqMJ+Xz6Q\nwVzNMRnh9bELQPOISnL78Lwg1xUqtMFvv5smaS0QV0GFXFFDMqmIb9TTmF3L\nfYGopdHwqEDu+Rlf0fa5zOAGzBjwIny8o+MiRi71MKqW1xki1u/Js1JtfnGG\n19nmt+8WkN/lr17v1u5LkdNtDchMbE+xlPXjDCB4u4yriosnlHXSkns9+9z2\n7MaF8OmD3wUl+QqV5Hkd0YlRrtYYRueOOUAxW4tllHgBm2tmXYzgG11xk95Z\n6ZOGiUIEIC4G3Dk/zuumQRz385hGqpfGYMlMKyOd3HmqPjIqcf8aWIVsTaAz\nF5CYsQUxJgsotIqjuM62uo7L+FjhgtgJXIjNVSCVyK3e0PbRRV+zRaN85u9G\nyEe0ETd69rnkLhO1X8V9cIa2dmZFzWhFEu/h1uAexHmQpxx0yEiRDYdKbT6M\ntEOgrBBureuKkaYLaN5qud0w+NF3uqtDBWyEsESaAJcnnv+lhNWNhJzgIldK\n6Qsv\r\n=V4bE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPSVIlsGOj9eVU15TuCgEK8vbhDlPwygvM3OoxufwfUAIgPcRmvNqtUkwnNb2t7UgEztGopnjilCOsE9czQGlQ0Nc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.7531cf97.0_1629998780528_0.7162659028857952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.3bab26b4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-phCCNgBYCvMUnrLP8Wlu3Td3Dcc2wbs9F1rcMhLKGX0McfwyJqPfdBHlZ4gUBOytI/FeimTbJN9LO+xhSU5mxw==","shasum":"400a269d619f228e7f26f1d53a4ed64376888987","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.3bab26b4.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtbCRA9TVsSAnZWagAAb2gQAIiRI11Ft7AxTPazI9DG\nF38+YlxJDsCrPFTl/1l0TiIzUAZsoIBsuhf67xjzSr+Yn8gqniQ4I4sq6+m0\nhclcV/O0/5CxWpiHXHCNba/yt01vigjtWH/UA1El8bItrrIwlhCyTubZ5pyg\ncVwbTv4r8Ng6612HV6YFKN4wwNHJe1wRdWw47+Z1g3X0g7pg4fex8coYOBZq\njUbJEsSEpz6fEPv8pgMFLzH0sN48GhfauM2sGS3qd2P5XkhA/lgfwc717Xez\nnf5EbQQW3vo5MwUy4aTwC75UM/i+Fm6URPPLLX/UFiFyLhEGPZ8WZ66lCvAA\niNCyV+Z920bSmN/Fkgr6zI5HoQJKbVX0wBT8IN/2K7k9rmwUBR7086VjymdY\nbTd44uzVq+fobPdK9KAUi7XeoFrIGN+4PEeM6AVi+4bLf0lKMxJERpNp8aq/\n4eV1QBfa2uJGANP5cXzJaauQhFuyv2T/+RaoKkMXBPB68Uj4SjWX4kWlBOHz\nUMf4BJm4KqObPjEJjmbmNz69OC+3N4c121iJwLbGwX82osZEZfR1X6MdMGHb\nVPmy/J0wboYnHqq0juk2hXixwrNIUrsbIdS6vq3QQmnBmE3JiuBRiRYslz5C\natDDBP+0HciV4ikDoQRgJHqEVofp3Y1WkWXQrr96HJkeUnjEzpEhiAdlQnda\npEcU\r\n=rKR+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDm/opZwI2dvw5Fn6DjhnrLJQJToTNdZW4UxBIZKSTxKAiAuRO40ByjSKHMgE/vMmxBCiQbc41CQEqkwi7ZxTTgqoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.3bab26b4.0_1630014299147_0.7600632202443647"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.fab48bee.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2vvFY0BKHAleoIfLiySLAkMVQJQ0EZrRLWMjdg6F2enaNPJi51jQSqYdQW09gEsKyUtviruaaBMrJMsyqBXS5g==","shasum":"dc31a8525e06c5ba914b5c6836f820eb0e978177","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.fab48bee.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBC2CRA9TVsSAnZWagAA6ysP/i6FY8uR8Mixi+IocxL4\niej9kjx02+j+qShFcKfSEw+pK9hwKK2dbc7bO/KUtfhgGpmC/Jk3tjWnwh0V\nt78SmtcbmstS3VT7JoKwD5JsZFuvUCbLnR4ABt7Sjf/DxuPuA5n9XHeorkO7\nMcdqsTymEOLSUh+FCOecD9KBiTxWoVrpqgpyaIJnkNty+WCFHCV1a7jCC5b8\nl2mDRwkW32ZmpZuvW4txYHDyePtB0frCoEDve4l+HaS7rPAju4zdlCrfog/0\nh5I62Gm2nCcU9BSYlXcmj4hhOvKLLcuUxCiKP73PMtCNLibmmuXXBovN2K/o\ngIJXtzi2/I90HQjadlDX0re8sl6ttau+a7D9q6SeYhk/vsPuhLdloAtBfswV\n9+eLLI+orFB+gOJAvxwzIZIBBvVt2UMWDReScJB4eNryBYk5k1KBjHKoza5z\njkka2hwcw4a0wMyKnOvLkrf3h8fvc/bp8lam4aPpURIaG2h77kcn4+WVxFK+\n823mpH2oKHMYipParUp0NZJ7NvsAoAqb0RJVXEAlMKTcfvm1lFzCt5Rm7wBh\ngCV26+MFOvhzN2sVMUN8ZCiOzZOs2E/9WOs3JvRtH8hp8Nw4lR6gtNPZ5ORn\nwlmbOnOOp/1dy3Qoq4aVTTYzWIi+3KxxWx1jXIUwVJUW8S1fwn7YGz04iEpz\n5Qvp\r\n=akfB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBeHZFAPvkfAX0tcG/W3PiDu8j8YifGnf3+pFOrmaSnAiEAujr3ZYGK/7brrkWU59zskr9C0N6hiNUvz5fq2IqYahY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.fab48bee.0_1630015670802_0.6401230276242249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.dec18df7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9DkKR2lA5zolyC5oNpKwcWDKClkKdkduRbFYgRkZXIUXBp/p3+4SRJ26PqHw3L5NDFHZ7RaGzGl9eL+gCVBNjA==","shasum":"2f2cafc4104d315a0be11a4192632a0ed6454c2c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.dec18df7.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbQCRA9TVsSAnZWagAA9sYP/1P+qhFnsyFukDjnVRX9\nOHxtQT20mKFg7mAhT9A7iNAFFjRoWdB7YJtVOKOd8JzvueMDBcBYRl7tSc1F\ngh391VGtbS9UAupaei0oyZjGP8ttbP85dPXhfb10FXT8BwhDkiA8w88O9YKO\nIKZlD7JGQ/cOp/V/IqB3q/cBP7Wyf0S4Elg3Y0K4Td5piboC+GS5z5qfOfxF\nwTJFiYces2t+KJDRxofugXeEXj4jjSqmdSlKc+LEnStwC2KEjqBfK7v5G+wD\nDdEfak3t7bcm0DCC+uw8kas2zlWcHUlLT7fc97KKVUX2zVHaG2bsRreIqz9p\nZY2qvmyrwr//96GvHrvmeGzndpNGJh3sfOYKgGVMRCb5jMmV5War1iIEIQ+V\nXAEZ7s+2fAHQl7OiO1oDh8XGKnPgQvqF8jSJWBmPMyJq/Tmd/KdSwG+yH0bB\nzGYiBksKzV5iujqIzzr469vKUV3ejpK9DvFcNo43trIw5cl5/YN8rUrZpcVy\nx7SabFRoXPQEVTFDxkO2rc7m7GXfUt/i1zwBPAjwnOpMCUYCiYS8DzC9YGA8\nC7mmJTd8nU87u9dsosNIiZnEQm7saWS/vav8OQZ/C+PGUZMpAs2R5mWeMCRJ\nQUZ1W0UlDfe9uKD8slrsUGq5fUYCYuTJvyZTsXgz8K/k/3s7DkxZYQnLoLFr\nLmUz\r\n=MLlk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL5dl6q7p+glUMpEVc4pWPVaS0ZEojq7XeITGSAUujbwIgLii3huHar6Pf/6UBEZEAAEr6uioEukqjWqHU4eeMXjc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.dec18df7.0_1630312144397_0.9748127087694249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.61fe5b17.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qj9Acj52rc2502q+Y9qxcoLlDL7L/LS6h3HYfWsROtb0kOcy23a10gLydU8Y9IDlUk/psBVEw6+MewSjLSk5FA==","shasum":"89f9d089e3eab062106e5e2b139dcf2e610d242b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.61fe5b17.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFzCRA9TVsSAnZWagAAkZcP/1FUoldRnA9PYycKsCyr\nK6HNuYd5HCAUVxzssR9dcsnNeF8kWn402Sj0aBkVU4mLsWnUPcJxYryHcVDk\nDu3Uu+XHiAXZsw+lpQppqhRPeHx/JsVRAEvJg0sNipRtkvGsQC+J81PUcCtv\nqpa+DKg2UjnsFq7QysLMFO8WfcWgivcZbVkMY9MhgGINRGT4bx837iSLmM6K\nfmiDsFvGgVMk22iTuJ0fGOXivw0mj/zfnb6zOuXhKa4kypQ8pJmkvGg7pvWs\nzQj+vrHuwbj3Pr23I27WNolEWhCwwHemfVv95G2ZxQ8iBwEVJQxrPlZ7jOtN\nS7GpNeaDbUB+58wuyotfQjc0hQyKZ9RzMgkYbIs6N9akeS65Gsi7RG5ebjC8\n3hdvHM4MQkA4ycseo9rYRyJ/3/oezLLTrV1WiQzSENvjH2X7axl6QQrSJru/\nTW+RnGqpt8iWKFvSwQ0Yl4+ryEnnYFvgNfVl8cbuMyGj1D94/M283M3GQ9nB\nH9yL9sEPeZmQUKCXTultNhuiL0sRMTP/mDpyQJ6cFEBKiPOPNGjWRuC4v7wZ\nS4VlTTNAuoZJfzsRcy5/CUJFKChityHDMoXxUo8GNDiMWM6rjkc8SyV3EofV\nCoFIWkYZqhT2H0TmcMx6GSo7mjGMrZklLCEQUwwTMHWp5IBNW4ObWW5qtEo3\n0Kwu\r\n=5T6P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAD7pFfdKf7XNE30yc3ZG5/6/dv4Ml1XS9wixO9xa1aUAiEA+sfvVcUTzQGkABAnj8fn5Jq5AT8tULBBK0+oUyi+ytg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.61fe5b17.0_1630351731549_0.0877092035579854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.a8c31f54.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xHiyQ2IYPW6VNl7g6n5SqsrYfbZa/pTRzuI7W+OxXuGuYldVLNdGtkJq/o0WWXiAzIjtR3bExTJtPde1iA/w5w==","shasum":"373959917e7e91ffc496b642f1c0fd9cf36aada7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.a8c31f54.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAsCRA9TVsSAnZWagAA8z8P/1YUeO0IijGMHpfhdpzW\nrovuQliTLf2Ljb9sRgX/R5iiBtztG4pqjjfIWF473Midx46sxMXX62hniSxs\nThFJUchvkaiIFubSOA2KA3YJo5sbhHn0f6PCyNgjMAyypsDxA0FuXgfg/vZH\nCeq37dpNO6gxrjJPkydsL7E8l/GLyZ+VbffdJvitRxs/yDFmtSTM8QOuM8Q7\nK6hawjzu/6Sar/pKmMuOwwOEqoULRGZ52iXJgvsLEqLozJlkieMEEMWahs05\nKEdeLyOFwhiWNLNGv6/+mogqUn2yrJvAaSfP6sQY892xYqGR3Zq70fsazr7t\n5BlwNN/c9zTBbPsDB4JZhVNqFkJ+nClNCdSAUedzrwtI5JX/sZwbWTQYCwEI\nAk2lE68f+XREdGyNRh/BR1I5KFP2vMaLAmf3wiaKhC49/ER3Yqxl8b9HJlIH\na2sI3lcNPCLQSNokpm//J6kVPoAw+vPH5KaCv3Kqs97YbaTO2DL0EMaFIUXL\n3CaDlxwpmgprGyNt+sAExswYmBZmmnREkmf9S2zJReLA5qHzX2VKb4Iffi08\npLlN09EROgHE4wfLgKL2l5eJIFpeXeezJAjzU0iyjPQ/yPpwJk2tRghhnzBF\nsKfe9iNkuv/5+zb6TddhbjdoWbUVrrIzO1ibxrf9K8GK1BBSlblJhT7QbVyW\ne+an\r\n=xBxx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDz4hGXgbvow/lavBlWgQuQ0BDyhs8dwGfCCu7xHLYBZQIgbpv5AaW0dIt9uQT3aFDvF6VqKqBX31jswaN6wwZfqiI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.a8c31f54.0_1630355500776_0.7839006905209218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.a096dba8.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cnK0q8vnDCO8qPQvFg4OZMyNQVz+fzunau4bC9LDZ1mBAyUkanh8HPq2oB6CLrmNqxNIO2hz+oIC3H8S7C2hDw==","shasum":"41d998f48ece50447c9665ed30ce5b609d611ddc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.a096dba8.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrZCRA9TVsSAnZWagAA2ToP/3Gs6a22nJIeBj2+VfEu\nbyGRxxJgOnCN7JyUbqyTZtHwMkImBgrrLyvVYKCcxpSyQrUJP1xYoldUdVZb\nDbC9aBcJFWPe2veWtgHlerzpHfJhRv2TIjlFvUUvZFjbCrlTVVsB68ad4lpA\ne1TPBufOumMx6Q20sE6htZU16RL+kKgfgsXpe33m19E56YcyjHTE5UXhqCAk\nRkeeTJ6RWwtNVgdODiUeDs7fLPGhvZ6hh7YXrB9odbzrHSOPcG3lNV6FXbav\nrAw7F0wLgSFQyV1xPheKDSDdpq+YGN2nXYhT7zyq15pm0vIUljTaZWcd+rMP\nVVMlRJAU4Vv+Wba6YJp7yfc7l8XDc72yeh9j4SoI77MkNlYb3VRCggU7WG43\ncAov5EZDTp6zcyUCJJP2xk0NnFdflnRqxAFVCUsoAxlJNULnxWc6X7EG1MXR\nFOKXDHd3gctESFdVyZlSNnAwlOLPUnLhc9FK+bw8IMKd9aBtLFCeZprln+DU\nbpWKQOios+xmrCRbAu4yIjzxVbPIkNtsA+zXLmvGpS3eBGHnpvm9uXU01rcb\nm1jGgS12vy5rbDfwKHOdPnrn25+42IdWETJe6iBZxfaZrV388FBdYVJw/LZy\nwIxIAUAeuJ7vQA4ddncdOrkcEEV6caD02IobHxj7vqk7znb2EUZeKhUL1GZG\nnh3D\r\n=hphs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdwsU1tuZpudjZ4BB4fLBuDrtx7WJnOOSX4/zwFdrSkQIgTNAxc7YL8AB/nUlq45C6u047NZOr1w9BhMe6iRnuBjQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.a096dba8.0_1630448345521_0.7065553170695418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.7ec04d47.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zSZKRxI0k6QXjDzEbS1PuPoQMQQqNqnaQqF6jHEavTpXGugJoDQWBe9v4hMkubizSeoTUdgz9KI75IaF9iGYAg==","shasum":"316c79a85c6668a4b975c76a99d630e4ab924317","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.7ec04d47.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1wCRA9TVsSAnZWagAATt0QAI/BtrOBrAaesm1oUu2S\n8QbCe+ijACzKGLa+Fa7z8fLeHncYL8j/Lr3OZHPGbQn52ot/U2tbA0Kz0/zx\nZn72waV9dvQk6iFIg5UQdB9qZY+DUBfcwmrBbqvv4a5aE553zyQuctQ2Twtd\nkjC3/m4zUIgJDOTroqbXSapKxjeLo7uizlmxXWQFh57X7G8ba5quSRjcyhx7\nW+OLry/BsRu+E3Dcz9LrB6QQm9L2EudK056wJRNmUA/2L5zzDsPGhDwPW3sY\nEfeK/h66vnuzJDe1O/5+v0zmmQ/MRUp5LocTih6xqQ3W8wcbSmzrp7GjFmeU\n1f6hvgad6NqFAN/WBYdhacIy2DZnBuvY00m6K6GY7ou8Am3ZKxfk5mWnuYHy\nwOboYlbCdXzh/n8CRcZNPKiK/1JGX1N7edf/5uECzRCyvSvOqLUE6glIlQH8\nrooFAj7P4kDnQS6ZsuIpOdJrpHUu2DDMwEn0v7sJ5ZI5cTTvCfr76YoTwm8Q\nsxqq6opzql4QE9jatAQw767M5xpG2oI78CIKpMeinXGsGoXmvwYcbK/l2Sbv\neB0Sbze+MWAZjsi3BaEc0Pn8vyW1FkpVEyK2pNwGOjr5I8hTnf5/cT8vTgDz\nZU+mmpzxdSmxyXu9EWxUJHNysb6KBvnZlaHuczdVEXW9xvwCcWQyQNFyHcgL\nqsk4\r\n=elLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfYBwD8VM2Fdwu9jwVui5PjmcFQwuY8mq9N3dVe7aHHwIhAPGjQj/UFmW/Y2yylVzv8qEuMFhD4OlRnNvj8rsqqlia"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.7ec04d47.0_1630625136751_0.10260209520667307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.d00b098d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6mCW9PZ3YYvzLcnwMbb0YCJBVlHTDsEcnDRfu7/NHSYz6d4x8uscW/U5i43V/g41cC7XsGKLJjtwoRUWyhik6g==","shasum":"562393c98033eb55e197215944afb92a72f2871f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.d00b098d.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMbCRA9TVsSAnZWagAAR/8P/2q4F2VMxXmdvHsVXghT\n68BLrXG62gDJ7hRL2dnTJd9d/rb6c5JrtMag4pV+42wklCd2TG6BSFtzyXKR\n0nNRMkYEi0dfIrb4FH+lXsFQ8sinOgtZQWCv8E2qF3MkSlJwhw6kPKhE4eD7\n6ULC4zCd275WDOe+0rVc3qsgLnM3onj0KpK6RFAD561zIbg1+8DMjvdg3J3g\nqlZ/8IhrypiAODXp514ktMqT7Gp0mzd/l0xjKR1RzcvdI5d2mMhL6tNWzLPY\nqiYPBJPEKrRmy+domG22ChjcL69l3RmZ1g31PrzmHBwr8sRPz0lAsBOb2iC8\nuLQJiO4kvzIZ0lLsmnXiQVSXlGfJD5plbHHw+EX3hyWsDko0lAGrP4XPc/wB\nkRMxrI3NfKkQsrU9iMjbqZKqEdl2TnpNB8UyC8hRBevu+r/a++ajjUJbJqa2\nGNvXGOLQicN+2hx4h7nizDqiFx6vkzC0E0Ho3je3jCbxTH4bamwNOxpRmrlL\nstyQ2vJl/OZ9TDru5+Higgk5NM1EZp6Gb7PEStm6NXrKZWc4VpjPdjuOXwiK\nJ5Xqq75rbMiFpI5fcx5mk+J5YVpgsOuamTD1un7BWLnkzSx/AeD9IxItt1WA\nI/dqVzizJImvxHv/NBszkiNAGWq7G50ltNFxIi9kRPU/lfNtQ/uRkWIOfM4O\n0zcW\r\n=xZW2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXlTusANn48S0LYHFXB8nwlrT48U2rQTdPo5nxGV1QzQIgaQ+tKN+2wCCOMSqhGem/+ak2esb/NdCINa7h9ElCoyg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.d00b098d.0_1630704410630_0.4863604624258533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.f29b3352.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b0MBfY+Ts8wvzK3qA3Kh7HvJs3JiTjNmgd/ET9pX4J1LDo0jh1JL4S0/Dmw6S8q/NiLoeVGVJy0YhoWSWb4o3Q==","shasum":"1218ac7f4fbe48baefe7695439ab47fc2349dd9c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.f29b3352.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xyCRA9TVsSAnZWagAA2qQQAIVGCnpBWnr8/7/R/9Th\n/EboG2cwPnBIsBG7zzDv7dMWexpFwvVIlzAiXIjv/pDCODsYX33IJ/ZX8pCe\n54+uRWpqmwKNE3/i3oSUXBheFhWuSxiV2+njvhnGxxl5PkfSMOexKh5yt2OW\nk/BDydtH4GdNED/U6PjPdQvcsxEwYPUu+UZsx0PFdZLb2RMNxceLkaY2MaDp\nOBtDVGQ81mvofPXP/7k1ocm7Jsu3D7dhBaFMs9n0mQp4Uh88yNxAgxuoVMk9\njiDqvpZs22zDcvNJq3tPojUfRFdNCeU4NOweHtndcQOQqFd2dOi/imB4/f1Z\nVg2tAyuGfSdRBxJWwfMWcD4cA9ULXUnASe5qvpRURecCwy7M/oiYRg01MDub\nuu5Lu9+WfEH5GThKxIbBKqV5qPszzr+3lVjulMyMqZIzrhZGe0D4wSu1rA4q\nB3eCNVG5VkmTACDgaaqew3XUrA96C86Qr3eJ0Q9Dix+Igc+k7rXiB6ZUUTVd\ngj0r2fl2T8/wV4fqCQRwG+y13T7Ye/C7MY5JVm25VHj4NYCxdcnBy3PjBiv4\nXRQd+A25ClrrkHwPX1wMXPEEH4MeUmMaFZiVpu2HDd2JWgXtg2T/52Eq6FSL\nIX9AXXL4C78Bq8CiLUxu06mBO1DQ56LTp2Cx51lfWWDL6VDMJtyoDOACMMm7\nZ0rN\r\n=jliV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR4U+rjyJj3uJdUoVOiLUOqmFs7bCXAD3F30FOvczCpwIgT5IMSvpgN3T9OO3k0ItiEevdqUCu9O79FvEY6J5HCQE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.f29b3352.0_1631038578339_0.8539848863298538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.4962a163.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HKZB7aAimrD7wB7r36dctN8o2XbewnvgzKgsoyvQGtExYoCmmbMBaxBVB8J+iM/fcoKcFUVjvjcQax95kv0gDA==","shasum":"b054f0b2993c4cf6b294cd8c3c9ddc44bd1cc0c1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.4962a163.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/t6CRA9TVsSAnZWagAAAogP+QGJTPFn4i3/jYTIU0dr\nit0pqsfftuRA0B3GhfntXA8JMpgzxjNZM+OUmEJ1DKLHGc1Og1Daw87sui3X\nR1obK8GvEd47NFTM08hKwAXU6kpNM26P8hnilamMkb145YD8epzOkoiW7F2H\nbwYgrn6Yeg5oZopn18Yz+5CGKiPl/cL6RycODgn3lpQacPCMHimrclbCrjAF\nH88IViRU9dGoy5/SZDQIbndcRFnrHAHcoG7+VGYWeTHoPHnHrBj0Nf9NdjBT\ntGhXKIIGnNVlIxio3ActsaMerVsZhc0KlrEHoD0E5K46zXp0c9rCZF6AJ8Sf\nvIlhoO9kaHkbf5MgWXEWNJsN881AdxoP8Kkpr9Wk5mR7ychQY4Z5bivC4d5N\nCg6KFXhOp5i1tNdDaspFoNHpCTHyz+4HD9Nz0b0BsBXlBrFrDPxIp7dm1DZs\nazX331cECmPN6KU3W6yyEQTBor+2LhoQLcdoihKBCGEmJC5cQYlfNqNPjtx3\npr8xc6UO4HmarIcVip77xNZg4gnfQel8Y50tsjHmmGoBvWHmUU5l8No7TEuZ\nVIyrgg2fc9yd7EZ7vb6njYYZfpgUhEy9HNtH/UNIJYuh4vznGSljWj8pXw21\nWkkSH8r4tAUK8kf4WN3rPu2WuViGuV+ctW7A5LM53MJvhDNXvhlI+0ou0Dck\nS/Cc\r\n=HL/Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0nLn5e08KwreCA9AJTVX3ge6E2xYoRDrTjDRoSLMwOwIgcRiE5oy83djEPLg/TSE28TQljKr9cgdt7ddGrAxWcg0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.4962a163.0_1631058810357_0.7269993927897747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.33102bf4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/touch-target":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G6qsUVX4+hp+/rKCnuRI9loEaxIwfg8IgNPyWpQEbDoffKq41hdeNtvr6q30zZx5zt5TXkqBBdp1vOxFO5Q/yw==","shasum":"5dea15d270a3d7051207f2ef089e819007a02a13","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.33102bf4.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAA3CRA9TVsSAnZWagAA/PsP/1s95aFWgyD8KFTUDY5d\nuHJYq4WwCauK/67ZWANcai3oHIQcO3HpI2oMfNsg380GnoVqrI/AdQfl6kMk\nu7iaQAN8LmIcL04cBeBBNDXAqoVdG+YAyKDxF6y31x1jmFmdR0r8CC/ejTMi\nUoQ7q75vavHi8St21paZeLwc8fwqUMrJjpritkPbXwedvz+ZFuUyCvxhH6g8\nccqHN0g9jkPsMB9eCVFlKINwpNsrjbeoQodCAcc+2bdMFmtGDShPfaUDZ6c6\nPo+LeDS/rmAc8gxvU+AWwSObiSfCKl80NObZrPt38/zI07VDKzE9Oeg/U3eX\n1RgZ8qXHXKYIVjinxseFQuJphXdGYqtHWDPyvCPpFT6Tc7D40DmeENAHMvmh\nt/YfggYG0wveaMuXavj7uqQiYR4QGnqXwr/QGPPE0YRmZRTKPcqIdNcEYAY0\nYm2R15JCm3u7rhqv+pYJv6ZS6V4jvVAiZYqoXzUE+XuXunhE9I8CKD1FcGur\n4KNR3gEkaIxRvFNo7VDJqj3uhSCzTCbSy7nvvw+0VXZ6qAe5vNUZh2bC9wKo\nENBzyLArtVrpvOB1Tqr7FArB/8w0aMeg9AE9zAxEmgaJ9cVNZ0MB4asoHYPN\nHbkYKLTwQ3tBKuoquBpQniKKrWOqm/EfeW7evImfvPMU3lN8MC0bI0bNHtBd\nuFmL\r\n=aKH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHS12dEuV7d0eCuQBx5eViMtc8svJvybe9G6F25fAJHJAiAp/2lelwPufhkteXcD8CeArJvUHZdGMkWcr5Es9hirBQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.33102bf4.0_1631060023137_0.9397551211858488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.76c68381.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","@material/touch-target":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N8qOsqPSUFQRVBDS6z9QS74W+wvJFz5K+6I9L0DJIKv+uXIqiPbJCvpZKh0Zv7k+y2Y4LyAlXgxxNXSfwID8Rw==","shasum":"50fd8f19b605e57a5b280130b028a85a51d07ba1","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.76c68381.0.tgz","fileCount":15,"unpackedSize":83265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmBCRA9TVsSAnZWagAAoiUP/0E1qkkzacUePdpGMY8k\niFjrYwutcr6LgDlJwYAb3+LYgTu7Q9PXpgLdWwHYFsLOeXExMgnGFrH24a5l\nmwxde5jLFekH68USzV+ZbIapwT0ckCGfH9vpkyfgnkj2P3z0eV1CB1X85bMP\nwn3QyuDYiYYVqF4c/YrruU7qQ3QpuMACnVs6BQpRPkTMote8zgSvco8fTu0l\n8CGwyHaIGQlNB/uMdjxnI2s0hW4Dz5fu+Q7tKEHZ9EkFmX2rUTTQb7XUPG3v\nHLpehxnbDL5IF3CrfUlaMk71x+Kzv3jUMwIXNw1eyDB96yyDKKlpxwwXleGn\nPD6tU8QlvUuIzF8zQJizyYlzS9bS3A4BHRtVstH8niHE2ecn9Id7NoieTk2J\nB2Yf1/gKEbUj7wEh48lnWVofc3wjPH0ZJKUeU2sgJPuVUy1stIeK1QcOfIpv\ngGv9y0v8JBJEJDBtap2OLTrXA+M8q20VZ9f+RwCPEkX2c1CiIHAMj95N6YjR\ndIA+QE1CRbBwsMnMDkBxljuH6ko81yU/ZRbRMM07A1gCs2/A8XcoOetVmTYM\nLvhHFL2pu33LKxDqffSyaZPl1TGNNN9PNrgYhxb2lmqf6XYvjET2LTPo/Jgl\ncVqFQ8Fgxb0Jcm/yGNAmXhxokqPwgXeLcUt3UaPw2t+1l7c/bNxGq2FmTftn\nNwqU\r\n=Fp5V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNxtxg+jthP273sYX75N0W8lY9vfNN6iNqUP+SPQQVlgIhAOAY9I4a0pQwJsmzsKOvNfAeC/OczU3mgw5KERPmsJ3D"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.76c68381.0_1631132033125_0.11485945362825167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.17d51f76.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","@material/touch-target":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZZydr8r2cWD1TmRFG3Ona2o0wEQyr2t+jaxbAE0wdBDVsfmjEzzSXvVnxBN5o2XZOzUpyQbdLSYWM4O1pJDxCQ==","shasum":"b8cb211700f6d310f7563a4239a583ce75629217","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.17d51f76.0.tgz","fileCount":15,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUakCRA9TVsSAnZWagAA9BYP/iioddclURfIbTEJO4A5\nAcd2jjb4xBoupdGhqvD84k/pxtuZEa6ZXlw+ZHs2orsdVcv/qHDgW4cx4mvd\nlZmr365KqIM0Yko4PLPakOlyZtphPGy2GYfw8QnYlXd13UxA7z7ofmYXCuIu\nAH0AdA+xksaQwZN+D7VLEwPEfP4SR9AQAqJ8rheudoVBaS0E8vSxU+qlTS4j\nS433Raf8e4J+sQpQ/K/d02GU7uLy8ZibBF6zQwqdzHIxMUsfHH00tcPZv++I\nq3iYehqK24FXTxMRYs/8bPSVIzl3MEC+H2LoXBWA8aMiY5x/fhE+rsAscMfh\nXVC30vZRR+w1wNY9niEwun6c0/iyQaFMQJnscnLsj+Bu2LwqoZlORD+Jna9A\n24ZpSJnpbomihCYjitEwNC2VsZlniFHlB0SNl+9dJh5FE/K1hHIPVJSzZAuN\nLWotNyZ1NltjdOYo6CcPQxBlby4Dpoj0wRyPhFyDCPxYtFgStK9kr2hwP/Sz\n9bvFx1PIbBUykRtwi8F3IWWyjWBDbaxlwwwcYhb6e4g2YULskWCVnQFct8M7\nc8l9l1KoMVwXrve7ddYJfX1L7QXZRUx+cNQwEz7KTVF1zgMoVwYzXTznn+hn\nUr+Gi/vFSCdRo+GIYbQSN8tXfQSqjz5WimjD0f0QrA0MvIYbLUIMMKHVjhbL\nd8Or\r\n=v3VT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjakjj1qObk86N0EWGd0osy8sedDW96JsDlrNsJRrDOAiAjhMqMkZy8mAoHhi3ra/G5AyKWrYkbjyU5aSqcVKzPpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.17d51f76.0_1631143588076_0.11511015552842263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7SVrTjW2ULrCJXEMj+aFWuUY3o3RihC6AUuZhgdG9NB7hS9XFukz/OYRmC8miuBsn7bc3GsXbcnhkuP+QKd1Qw==","shasum":"b0f973432164855888a1fde049550cfc9d86d926","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.3fae6c2d.0.tgz","fileCount":15,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TfCRA9TVsSAnZWagAAxPwP/2simasXBT1oopn+l398\nNSeSqO5zIYhOAk1SgxjBr3DOOQgqN0q9NKtGF6hOCfo6KSxCm+Fxf2ikkwKz\nGW0+21WK5xpeU4F5OjkFEIYC5dbRBxz2ohzq+4NoNDSbVjLN1olzcRAmCyVP\nZfca2TmX6HOOiWMUbFpSjp5wMqxuJhvmcHCFALzyaMIXKLJo/EhthrrOii0p\ngOsdQ8g1+4XF6izluc7Yqmu76sEwynJcwMuNf2G53AixQXP9BGs0KvSnAkc/\n17q7mMLN/x6n7ml4fAUdBDrMtL1Ocoonb2CJP8w+IHckdXoeWdybEKQvzhOh\nE1zOKBKHhP4LAwHLznTEuhrvYEzAMFgWkqfrv5CePgOV4xri8R0MwPy/1A77\nWRWx4t/51+Uum1qheyco2sf6XXcgltfSHkjEGAdtQmOAgKIZYBQ7Hc9Ti1RM\nYANPnYJJOA4CzUwZicvFxfcnhrTH2QRNUW7f+SlwSX/zjk9RtONnII8lFIdr\nPdUqjaqAZ0kmK3ufLG1B2snt51UZxlgEcfAIYjFZpNp5j0z7AazdSPYBxYAk\nX36ExHygSw8tm6oKH82t9/0BpppG94SucQ+zSiLsBkWvmlDa4m2mI37HGoYV\nST5ke7Sax8X39gvnQyH0sT/tsnhUFvT+ZFu9V29UVg9QkSCzsveWlrHGCMWp\nklM3\r\n=AVYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCL5yZsnV6PTygPLrp77YyPJ8Ik94qQdz/SLvkxuX+NEwIgZX8d2k7sbpWeFJR+NAlhkP1CQ2QwdKsWUbONxPTDbYQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.3fae6c2d.0_1631298783556_0.48874638396638614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.f1958c4b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9Txv7BQDqgMxqzBwE4ypQxC+ioMYsIXLjy7jEjYee5x4P+1ht3HpRsKkFWpZOlqCjUWaTJsvlZD0dqEYnD5sxQ==","shasum":"327fafe71404dcf0aa190b7f5f549b1d48814d33","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.f1958c4b.0.tgz","fileCount":15,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SRCRA9TVsSAnZWagAAqvsQAKDDPVjUwyMY5fTwKMcV\ngXglorx6q7E6Tw7DuJkMaqahbRKwIO4hNw44Qtogvh+OiXgn6HCQVseSW1Wh\ndUtX8UUitfBN7lU/g0xZQq7GyfkJWKWPZYEs3A/lQ85l77btRwUMGo88nlbv\nnoDN2nLAvo4jnIAx/kDpKsZ2hrFhAD0laTJosKuJ0Ywdt/B1Qdk4MUJfFdnS\nIN1hRQ99EOsMRHu4S9C7cQaYhshYtFomU9gmK+8jwThnqxGjsayY5mcEJyG7\n0CyS0KZFoISIJaXDoMoILABW3nd9fCbr+vfqZVSCHztwfdFHIgu3/L+hFlDJ\nEtjN7VCZCheMMwOnBfzvbtd4XIZqJMc+6MhTq/N/eGz6Vl27FaHjpZggGvkm\nGX08LeIRe8APNdqlWfICLkGJPwqAZrqEOVvmlYerpW7tcMaFsIGn4tt4gukB\nrwQSnv43zJ1o5/ijOPvui+YNL1Q3ncXBAArOwgOMfnCw/CGzj6iC5fyiKAFh\nBXhKjc4tcEU63fQzeT/NvXIadvoLhYKWCmYMiAE58VNa91EwIGeX18WusBAn\nmBSy9TYJxGRoPSM6a+wWe9A3O5ObnBSbwtkEN5KNRMwv9t4Xoscps9finWY7\nQer3+zKTWANX6587UpCYUbVg3YElVgkb9uAWEvUawKb9Ureuu116kh8covym\nLBsn\r\n=U837\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhsWvvmiamVVBlp0nVmwYWtv8z20h1KUIWyY8ZURCekAiEA2NaeuKVl84p3Ji+dZrufsT+UX3Rc8uXYH1ES11hsYHc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.f1958c4b.0_1631560849428_0.15786753456971248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-checkbox","version":"0.23.0-canary.78abbd59.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1Ojwl6GTY5f557lcGuwW/+QvcBHRmsYXa36arYHi/LqGzgpYbzFFsFNnMZU0stczt/kph5a72I5oCqSfZiZWAw==","shasum":"ff95740069d61c3de4c8369b31d958b905ccb714","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0-canary.78abbd59.0.tgz","fileCount":15,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8ICCRA9TVsSAnZWagAAfcYP/RXW9GbMBLj8yNFJbl2G\nrkopl3OXET0qLp9X2AYo1u9UUzfuqFbmjtU2OLoVxlGPLl9wu/YzSbVR7H0Z\n/o4DiYAd67OdCMmio4fp7MUPMcZmPwS/5Rh5SEXe4NUNX/89lglLIiS6bNTe\npnXbBDSw3HyCljqm3KWmQNrnaP739d7V9Z8VkusILsnvbsvRru5qPuG3mLOW\n4eDWUOk4nuQ25W98WVIEndIVxDcoifmJsfrle5j79uXRwHkO4g+DgbDbPqqI\nO9wjKLMGQZUFDE5UimSGao6XyNR+wdJsh6BLoKnWOgB64VsNx7GE/EfsEl+n\n7p9cRUIrSC8TJDbJT9eNbn/nlcRudWODK0uLimj6PH6LY6pLyhGZlJBq9ZYB\n4dpmSBxf5C5GJeXqYVD/fTqBpxtA5l7ubjbIGo/am5VIGcUHhazcvsD/jAWT\n7c6wiNV/CUUCSAAyye8ueYbvvqYmPg6YPaBO37+OFE0Lsz+j83yM5ke91A69\nxh3B9xLyvYaJ8uzXM8oPaeG88Xdwts/ZR1fHvLq9jzwy4jDF9slqU68VGmVi\n9wdqyfu6Cwr16bJ3JeOAH+gRMbr2hXDH0zj6fUP+0kMU1x/9xE9DvrViyE16\nyK2Pvj6Nwr4HrcZIE4yWGiN92TaoGRAjmzH6uZuHCrGQpq0ywE84pTD24Jx4\nRzFg\r\n=8GEI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD26GsvJHNO6LIAClft4Oeb+Gv8xpE3jBtGpXfW6XuDHwIgdd1uBgBq2qR3Co82YoVSI4SzODrr4xOUWPl9QVxzUiw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0-canary.78abbd59.0_1631568386073_0.7170213626219226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-checkbox","version":"0.23.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/mwc-ripple":"^0.23.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-ToDgqBMiRhYZWidlRjUfOF6qoBso5gzQUXTIDboQhso3LJ76ET9KyPA1BxEi5LA0Bdip9PTzIujnBKeD2TaaCg==","shasum":"9a7f03ee1c146dfb2ac24c53ea98fd3eedde0277","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.23.0.tgz","fileCount":18,"unpackedSize":115439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QzCRA9TVsSAnZWagAAHrMP/2teawzUpK1JZC5N0O5/\nPuJ7T/1nw70HJ0hv3KhiuvsF+q9b+Qz36hurl2Zgvuxk0j5qBvwslpeS+8sz\nM0sNAC+06uwr45cJd5WumOES+hY3f6mPIWm2FRGEsQekvn5LIFfdx5azGsRp\nMgTGbm1aPemb3jvPt1GykuKX+GwsN7SOQjLZAiHjju6MqE9qws8vv/AN7MFn\nyc6i2Gl9Tr3ogTgjEQMqjwiYInip8FyCVZpA7BSxciNaCmpXGbaXa4J5luE2\n2Ul+e4zhhFEoHUdJIEL590vKcftpQhr47vHt45ltVtqbJ5wCQxISC6Bdb1HT\nc2GJRWImJky9crRSzIsptGjfr+2Vd3eEFfEAJWbuoNsusMMkmUpYJuM0KAi1\n01YXURRVvMq8DWolmWafiWv48wstlLZabV+ZbZgnQye+W+LrvzOZlOSKf09d\noBbJ2THVQac6RffGMcSYJeVuiLcLezgnTbv4mXgxcoSM6DpmkQhTKvDe2wuQ\nYf7SDpVdKDtG0f3KW0iwA/yZDocSQH9kt9Z+eaenNcfdeYPAcjd3qpDfUYoI\n20mvqwy+ThE80R9gWucgobyjO6FK2NBZRTvGocEB6uvQIo5VSBmLgFM40lLJ\naQU/juuKkAogrxZEZH3mRsYVR+7C7sFnBCRdZ033L6rjQkjKq7wgczQSsU9e\nZAvB\r\n=Rdql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCg3b6nz2uLsjRMIgdylzFGP8xTiOQdXsfsf1o49gZ0QwIhAMwV5TwJkxM9fCUDVeyfUl2JA8zwoqhkhgDpEENuwlR9"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.23.0_1631568946894_0.008189907448387324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.9830d665.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e1g7Y/IuFZITMmy/2beyzUzafZSojwNvBvNacQO3UP9ZOfBI0d/uGHjTUx0pxAE8mSIbmAylSTXnOhAPA+r1KQ==","shasum":"75b445d231fbd067b3951c61d690248ad7042483","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.9830d665.0.tgz","fileCount":15,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SKCRA9TVsSAnZWagAAnyIP/i4FBmcqzOOXuE1qUSi4\nrkOLLHNP7F0JsUZTmEdFsOaeISysHaB7yOabqi60GdzBE6w0DkgBq+N3rjRV\neLkJgs4t6wmb6VqIqyM3+KsLZc9oypZbaJyok8b3inDxvhrIva6kSBqxHjCf\ni9AyqaGK4wGJChW7wdHUbju9mD6qljN1548EFspwJkopiz09us9sa5EKGfAJ\nkgDF7bodae7TGZxhABuqM7tqfTe8wxbvduZQLDS4vA5NjT6WKD2Q205YpWK3\nVFilxLcqs7cB1Rd4IHTujMGV+zqjGlpH6Z/QIe5urWyphuN1355Tm8/PTy0k\n4l9ZKZ2Vw2etH5LtUjzCg61iBeN1IULS+kqB63NmIqOl42JdETWBZDMnE8O7\n6FuVwFrObWq2CKBQ0ypMUrSjgPTgG1/LQG8yEUJmrrcZGraNxm294L0ClIE0\n0pcGMhvfMnfH3mFWdBw8zUv0FPBzJjjH50r12e3TIZrqR7UDKkPPZ+Glii5u\n1XFnSB+Ax8OPEBAz7m6JKXuTCsEXyo1vJPistFduvtlbGyoQrI0Q4eu2gzbi\nqA+CCdOZDAWhrEd1Qyg8R9sQyBGESYqhgofW5KsbdxHWLpJIEuocJPVsMLsN\n5I5sKaMI/2RqpA3uJJXkGRE9GOt1muBuONc3QiPBgh3OD0Xdqgi/YmZplVQz\n4LcP\r\n=WhIC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSOQjF2Wz4e35ZVK5TYgCByleH/G/3tk9+oXvQd11D6AIgEta6SrXKpMyrtiO9W2B4VbHC5u18VOOoqui+FTp7VNM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.9830d665.0_1631569034084_0.5024152545922853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.20e2081c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bslQFSgHLkNBWv993pEYQ+Y5skOUv0HwekaWUhMmctQReO7gP3nMoB2sBZie/fhDWPN51Q/MRaGvjqRMTfgzYw==","shasum":"28a380d97bb74d977221267a938a2682ca22cd9c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.20e2081c.0.tgz","fileCount":15,"unpackedSize":83270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+CCRA9TVsSAnZWagAA8N4P/1qtQpJY+SnOfCoyCxg0\nGFIK8xI/QonSMZiI9CcAXKte1AXFwBr378c11JFURKMAvKfU7+fk8yKc2GBT\nbif38j9en7XKSnPdXqe0MvcFjW1iijf813CnQFRWFUcU8rh6w9RYgiTBpjOl\nYO8Y167ZrtPHptCiEtc5Q87i8Zu7s8qXtgvKOvYytn9/glvGcGCqxZty2MlT\nwZU/keesFuxRA0RI289CnEb+0YghEQdfEiCgYdFV4AMhW5VH40hZhIVuW8Ry\neP3ODiNQtmIreD8/SHT1UMrA9iEkQWBFUkq5crVYbxscjIehRi8BGtPm+iQF\n4KiS43nJH0t8l6aYHLv09ejv/aAiiuXmcJPcGBHRxoc0K46JuX9mFePQniD/\nkzB48nfKgR7ABqzkPH33J+XnUy0llaoxSw3cCItO3Q+yIiwTJGvvhB7k1fd1\na4gIV5tFMf7UXo6w8KMFe5XmTLJ7oMilz96SH+x/no136h/7tfN7OH0b8+jQ\nkHpJOOebmGcyjLOIyIY1kVvWaMI3txdY/VUuX0/QKzX5iC+O4/TjBU+M2j0S\nJnnnrmh4IhYygC9dspgTN5+EW/wBCZte/JWJ3muAY6E/Q7yYuxmCIILGiQhO\nyKPdV6srZQz/lIeGvDrrj7L4wAYW17AC81yDOr0PXXxUHzzxg2Xt8Xk3WojJ\n0tlt\r\n=5BYE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO4FaTkjaxs15urBkFRBn+dNKVJSbEVr0tveA9A278eAIhANPuXrOF+2lIoVT3O0Y6R8iWvRODzGeCqoykMfqok0PE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.20e2081c.0_1631575937960_0.3978756749725294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.583613a9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/touch-target":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vsJL2MlI6TFsbp4hdD3z3iI/VSlxi9qziwhDdc7PoLkvtLUkNEDA/WAGrCAyN9HNEE1BBzbfhHb37+T2LHER9A==","shasum":"d372a1ae9ab3c2ea41a4bd41781ab5605b2917d0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.583613a9.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNP8CRA9TVsSAnZWagAAlhQP/2F3Mg6ixzBhBcMKOeLH\n0gSpAKvjbJPIsZaszJa52MsF/smono3D8R1D4rvsXuu15DN7WF4gyauy3XQR\nB8aQJzaaZHrKuY4gYlR5vWz7r/ejHnLnHBO+sHbc99SWD8pSEgm56PQJTnqm\nvKckHPNDaaaSxEyZK29k7K4XGsKpoc4tItedrUQxG7x55GbcpDGYfxcEvLB/\njXH1JGSmpChI6jFHMjyNquLCSu80XfXOBzUBSHUY5RXV7Pu2gal8amd2qVW7\n/EAPFYbtO1/yhqMpjwHcbSlaG+M/c7qC99mrGfwWU268vefBkwc4wPwRzCkk\niMH83s4ouQ55BglyHDGjaGsq9ra3AjVu2pk63evW6Zvw6z2ti9uw+ZvIoccX\njgZkngxlc2alxykfeenoTpmIIlxF4k8RBlnbshuI99O7ceUlLQPWXDhHNLSO\nL+BrGMC34eDzQImE07qEmNeg5yIz3mUOl2GBhBFNk+Jede5UPLAYND3qgTRJ\nP9nxhYgWQv/EhFIX/X/Nn+PcWJSHC1QvURG3XsS3WWe8aNxXuKbaDkTG+bIe\njHhFzkZUcOkF3htL0wl2wGY7ofLxHy1WqOylyFn4Rid2dYzZKhpTaSQkhd+T\nuI4SccRdK18dP3/YHecFN6brn0rDh4NlGBkk6F6fSF5vs4KxnKYp327Hczj7\nu/8z\r\n=Xrgf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxGEl8wYx81BaPJ1qwR4Ce2uNt7csQ5elsjMSIMW5QiwIgHz6/yF/ZxRAxIogt3vk2VjJNw7erg4FDiB1IoJVIdi8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.583613a9.0_1631638524246_0.9291945702065256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","@material/touch-target":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fd5ynyVquCluAnwwF57CV/TTJkEKSPXFzM99rQhfwDZBpxUh/MjSaqpcGm6z5iYSrJ9o74wFxLxw5yR0y/NEZA==","shasum":"791a27621c5d1e977558accaea934b5cd45412ae","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.0e1bd56f.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNypCRA9TVsSAnZWagAAVCcQAJ//kLMx83WTxW8LRD22\nW46v1B2KvaDlMpUeLN4a2F/8E5fz40qYMPqUhpIrbZa8U9ux0MIQ4wpgMR9e\ntm2HBfFFL81wlnSIUOqFwdMz4Sss47lXd/pRbOp12ubroTEXs/jkivJucNh5\nX46grxrIKUzFGHRgGUPpiUqBgksrRAsprKncyaGS/yxDcDOFsimFsZ3Purz0\nwTo9S1vfzYVIZb4d6yrH4snoCx2y2jnIzhY7bRStpXM1xPVqYLBaG0gVtWOU\nRjQQI9Po628VcLJZGB+8zGoV3vKqEvEFr7h08if2to2QbGDzZ76ex4mYP0UM\nFxbajq8FOKQiK2YnhbWjNYvEjJ+SqBsIMsDXDvQpjmdWecmyK6M42dGprulr\ncWHU8xiitMevh8Pd0zI1FV7GPXglD+tidLf+PEp6nEbccOoz46CUutxug6jc\n/iy/MXaZtPQePJOVYztg3fe1RosZfUoovqRx/cBmOz7oJCesDLjzbCoRoCmD\nsdRf1AUoRPTvhsn1DH7E8dauazk4CABKnd6m1vh5gk4e48XqMJThCj3iMExa\ngLzPsQfHoQszUVy8X6yLL3JPvTfwkeBP5JMP/f6GEWT8KgTsm5nAHPIzKE+j\nlaDg5fPNkjMa0udmyjCI7Aq9aJ/KPgbOGbBFMbBOniuuti+0xuVGpJnXtW1B\nXRvJ\r\n=5tq6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJG5SP+DXREJBNpCJGSN22+2cwfO6ftOJELGnxwK4yiAIgGfvr6s7jGKUJSEqMeRGYH7PYJEPvNl88CglxS5P2xqg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.0e1bd56f.0_1631640745213_0.2852527881493312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.7bb1818e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","@material/touch-target":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7zfBcUt2gdxYrGntCOzy1nzEQ/MvYFXNbSEuu42GBm0vwyOzTsnik6zvNEAbNK7E7YCNV07iiFbDqJFcuipZvA==","shasum":"795b6cae159e1784979247cfc64f65efd2667aca","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.7bb1818e.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/wCRA9TVsSAnZWagAAMWcQAKD5/ynAxX2WOQGDzwab\npYBzu5ggpNna0Rj/FacDWRK5Yi3KFK5+QFwZKVcLWgypHjfWhEmRuCty9NV3\noIO09kI29cuIK8nrku5jNP+OYf4GNtojPQ3MCQDEDSRu9/JOdNQZMaxLzuKR\nqoKtARHJrTf5iKXcAL7kNmOA85woEBlM5NN7hMqqV4g/1wM+peWSgalsm8pe\n9XECjSPfCAzoloOpisOm4JunvWPyArENUXalHvPJ3PIbrJ/FZoAbD5SCygGD\n96XqukuJfmQoWLpXYVwUml4nH65Yr1HAYl9mMwgwT/pc11J03X74+zJXYcZk\nyDBbrsHk9GGmkB38BgmkwAbqpmuDUmlEVQlkT9L+34j1fLMYGpA/3kkbCLX/\nmZBCZvZK0YTHPWLf8w5ygum+tlh/bBq+/0ZlzLh0KdmrGSwc8U0JImEdWJnY\nDi5aMAvcKmsYvYypplKQfUQeZGdNH28c4qq7h5zHJWhcoTLI6SvDkESqr2eg\nsfOgQ4rhaGoM9LXtWCL/4ODlCtDtVwb3hBS8L8t9rCY5jsNA3LHU3gnpwrGu\nFEbYdfe/EnJIbtZ9T44q6y/QBASNSF0ER+mSdsiJs++LwREy6Hh55xChm4nb\n4UtgZqbTVWr23rR67amBoblOzsE9HKB701qAH6dZMn0Wcf9ay/XCO62s4V7K\nTwV2\r\n=bDfC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVpTXVuOCmRm17IXZSk574kVcqOxYlVevjkfpKEiU1DQIhAOIOimgJBAvTDStME8NLRC08m4rOJNvR4no2YROTxKPA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.7bb1818e.0_1631666159975_0.2926246497558622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.b5e665a9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/touch-target":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tB7xI1q4JdM4Y0nLKfuNvBmKHv+8Mfj+47ae8wR5tDQMF2M+tlnjTdeNUXX9VMwYAv6ibjxEatDc3bNsuUiO9g==","shasum":"21cf39535c0d27c7453e1bbbc117606052ded1b6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.b5e665a9.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQje9CRA9TVsSAnZWagAAclUP/2YjQezLkGnDK/7riE4E\nK/r4MmwonXGyZaCnCrry+P5eVHnThpfk+wYPCKSemtvE/gMcGjtAJ0uX5yVY\nngiZ+eAAf0qr6nleLqNEHgVZNkSGZoQJ7SyEvMrtCcaEJJ4+ezWn67jq9HlB\nymI82eLvwe1nM0z6F2DhUq7I+SK83nao3RDUh4v9Xjpf/ostm/19F9solVO3\nthQjStn30VPZgwoGFkENnfPOemG047pqnZkc6bSEPBSR93YSxyoQIwnrzrPj\nwtjaJFkz6XDjA0UMQg2qUgVBNFBMn8K2X5wcKzGSKjnMsv4eQZvji4pyITmU\nMM8UuBBKbRd4NJgQMNLD//BmKrHTETbM4lGfHDomz8oTDpso/7rd1Mp+lxrv\n4rzd29l8/01gtT8+8sVofsOQWMFKr7OOacLHewO9oMtxc4yBD75AkXaShztT\nFLNoKNwuFjp/Irep9IyI457jps7FBk6rQ7maVLecsknHVdiOqpJkHX4FqeoK\nocbrvmPQ+/9P5Ii2fEAAeG6Sr8fy+1S/iiT892cvI9MEhStxg9Fz3IQ+lnEV\nC9VgSlB27JdYFVrwbdjQWoPwFc9GeCMc9amQxuD5CBk3Vrm6/rNAXYH5BAhC\nU3VUzzT6zMfHNHpVuWe6+zbljHRaIDFpsZ1PsUd+WN2E1LFnBPLiaDJYUhs4\nSLAV\r\n=NOVG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYG1ALGJBZPfXtKquWUwLwTFpAoF4g+mayctMaIYsNBQIhAJhgGpXmci4zaBKLsydw51mt0HCCG+cYQXlfHpU4Iu2p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.b5e665a9.0_1631729597580_0.14415858865966746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.ab1e177c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/touch-target":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P3Urqk9eVngEjEn1B87VXUPLKojkZsd9A2t3/Rv5TWPJDiJGHPyVE3NVJKto9lcUbtjWGjEeEH8m7jiZ9jTDVQ==","shasum":"ffff85193df068847cebc43ac0ec69e468a0a2cc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.ab1e177c.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8oCRA9TVsSAnZWagAAU5kQAJMLN2cq5fZZq2bWZLtr\n1R15zx81VKz6H7LZJ3TuKbrFzjOxuzGXISlJn5c/gAcJRDQ0piu+qZlGaiOB\nanqqfat1q44NO7YZBnl3IYlY0WdsBZ0/lUsB0zdDvfB8qFDAvl7+7xPs4qKX\nqIq+79c3TIZIToyTHkns7IIE6RfOFaWnx8ASLaYp8t8y9Xi+R0tsFFT+dGFf\n7SmX908ulQOfhql6gy17fVxBqkbY3+ID8tCwZEiyarQAVCRNR7D+iPOZf0/j\nTyJr/FqZUv0ib1VWDVi1XOhPYmn7iWomyTrlKB6dS8zXkzAbGIcmZ/cyLoAV\n464yeGZ4FLNGkXA5tAgvSp8Zs/lBxwTG1Y6ywl/2CTMdEAexFiNOsGsk/aMN\n2tfm2eQie1LVZyr/TAq0On7Nllgb+ReZf4a35gHs5wqj/I/GDxIAbE/AL9OM\nrtP9SAB9yabfoaaKs2bKz6tUaiNaRyEZb9vCbVKzoyz+B7ddDT3MCAYdiwYc\n64+Xb5c4I9bSFy24vFrkvShZwTeKY3uP7kD84PQR6gSufxna8GGOaMBNriNV\ne3qg/h1HbTD1dcarGDiJN3+RrwrSwwGShIJ/5eYTggj/75en7PZEgrDMGLml\nqBrraURnOVs2bq0rAVAOsEtqBR+F/lyeV/wO0O0oJbvtL2X12QhMISvAQlHM\nycBc\r\n=roRY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4YoudKHDWcX5wYWnbE7hikXGpq0OGe67yAS9vGVi/vwIgC0egsOs7BCS7oG5XQtzkGnm9scrPjWBofFF2D1wtEqc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.ab1e177c.0_1631731496136_0.17395796897695437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.8dff8894.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/touch-target":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+5LV0re0L0jlZZpjFT9PFGRLOx7pDXgH/+Vpb6hbsvS1dILfpCCb7Rlv556kXLyyou6WrE6K71QTS/xBwt3I9A==","shasum":"ccd4518f02ece86e2f487a8b2e5b31ad2850b96f","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.8dff8894.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkS6CRA9TVsSAnZWagAA/VwP/A8KHN/kYeRxMvLaWaMJ\n9PJaMrxKqMGTZFKa28GyXT9Lzp7DbHsh3anwWCfakAgyoTnhVCUTqNrXdxFq\nLkxxBCOkW5zMTHPR4GBxJJ8rIg6IIeCeTftAEOnT1i86a0/0GQA6+Th3yVjj\nCzz7JV3VMzEiv0AItx5kk6T9PWcCExLqarolB4gAeC3+bpF+eLdsuC9IqCTO\nYsFwmH2H3XbNgbXU1Do4p2gg+xUIdmkX85gx/qB1LwfQY6ZZ8tSBLHbAkmdJ\nDuM5KNB0Z+5EmyiqlZw6HPwpzLRowFoLDYDfURCFdsSeMGn0LFR+PeiFOzDZ\nCutZm4SkUxl8Kqg7mR/oFpgMHNQ8x3eoyuEyunel4UVGmAVBKQBSo1v6cY7/\n4YFyUEhSAsPS5SotwGVswKEd7QUqkET/kiDTd4sLFMVMP4cC+8AgAoS3oKBB\nXaI4Wi32pBP5pG3bco/GO9kE+OG9k9p00T53y5gQu1+mMMjWB5A+UgZgHMca\ng9+Xduk7iHC21jov13r5BTsRw16p3Tz2HiApVOrnHIwu19Fk0XM5wGSy5JDj\nvNYhFBtKMpTiiosg2/o9dQrkq1rJOJjb2F1wEbdVyyO52HmREcaswPPsTn0I\nW9STCq0OXRjqbitHMefbcaF4GHq2MlTD+2E/VyhtsY8nEGeKGwprNNANEGvj\nKRc5\r\n=gry6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC49fYaB5Syhno7f4Mc0LKft5TV1nsP2U2uXj5gFZM8yAiEA6XJm+3jrKErvygHObccpEwiY9esmzAsqOlKdZJ8sEPQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.8dff8894.0_1631732922346_0.9930162542118666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.9cd7e927.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/touch-target":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bnJC4+MClHl8ONBlF8NNhGFfYgA4fZYo/3oq++aGqz/OB2XDDd+2HlZnm/HoASQnvdC9YEkbz8T85HGXcWYDxg==","shasum":"4e5aece9c51a6567959884978814574f76e1f66c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.9cd7e927.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhTCRA9TVsSAnZWagAAJosP/jqozGWExCcXvCrAO3/Q\n7peVYV3y0A5FRFVllqWQZkJ8ePHEJKkjVm4uCdPNOIjxjDLXPGueyDgvAB9M\nVs+0ajh+5jwJfz3wbmnuI5VKSFmsjCg2ivTw0s3qSVUYfmXab3FjktCkgfPv\nzhWdLP+c+oi+M+viOhGTxXbnozSuQva5o6F+AL5urJH4q3JEj9/5m8tVfyPi\nQGFscEkRCyRD5q2rhuOwmTfK6JI5JZT/xVeBFrp8Js0rNog9nBmF4CRpuusZ\n648706NJaxjbIUgJ9FZL9+11dH4I+8j6a514oEgsiPFycsJv8f8e6ZFzknxK\n9sK052rYI+UZbCphw0yL99FitCLzREreAUey5aX5o4m8wSa1bGkkPshJg36w\nTI2qkXK2hVTAOy+HvEcpbW2gQk3GO107z9VoIDBNPyuJinLu/WST68ESneI0\n19gYMRTG8HC78x9QhzjemwqLT57vo7XU7Vlpz4xe+fYQL0P6ZKRs5QRUeylz\nCmyIUsD2gTZE7vZz/6AyI2YeL4piUL0y+mw9XGlWlkNZ7iNkCQ8wcY6fUQ3L\nNaNJj1x+N7Ruft1lr63x+vKyZfcIgryIpRI+B56VhKwC5xow7wwdvMVH6MPv\nxVriNcsI3j091vNwlCQLPgo4hroUxIIPzYrKfSQlYY2w/nZe9bxeSTHiWJvP\n6b/H\r\n=4zqV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbw4IhNNQpQqtaeUNWEgOdoSU/yCGmoUvwH8ghOYD35AIgZiTFbOrUr7aBxiWDYDY+3csbAv7RtpK24SMU77IcJSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.9cd7e927.0_1631737939509_0.15632892740444015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.a7132082.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/touch-target":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8Gn3psQigLBmqeMlX9mg/4mFDTPRFgDDtUbF2qc6aEFgrsx9jyq9vcx+CrAI5v5xDzuNYsDx9pWJG8mM7u9ZVQ==","shasum":"57a3c47385ba8f5d89d047b0da8bd14900996160","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.a7132082.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmNCRA9TVsSAnZWagAAiFgP/0nPTRrFGSZNkhWwDqXj\nS0xYgTUDpyZiHawb7AeIOYURYfJl8SLA50i2QYlglv+TMzeg22drRe7/lLob\nUXnaXT0r+cxn4Ued3igA7xP++ao2TF7oPZCUWy2kPdOLNDhYE/VaaSO8b1pz\nOQr7D+QGrCjx5wxzY5mdKKyV19gnSe7uaCr29E5BUzh2Hmv/Dfg1ChCW6X+W\ngPPMCvpZDkxu1lJxsn83JvhU5AGOJAgBvdFWfuzenzczCfO62fuUDwguHg6A\nHRXRPJ2QM1bfl38PZhECzDFhZwKMizT9HINbVoplW66xOdzpOreAsjHlmRUP\nzPmUY20HtNq2KyEc6TOWN2ocmDoN7LHt1pinmnEvcdzu1qAF+JUQ3pMGI6tt\nMWloCSUplsF1n/q97Btg6ivOmuUWHkpdolungyha4cl0Fn211QdfbdhyW2Ui\nl03cNmz843/i25NlrOxc4iEb8cCxD9vJVU6Q37UeFwZfur5uP1G+OPdsh5bf\nju6/XqEc6Tk1A4I/LZ7zxT80mVHeae+wIKz5078E2xtwaY9dncz1C3AdmSbl\np5lSCHkL4at1jxCm3ANPT1MuBkccVtgETvMeqYTHyzUgKaCGPABjxeBkF83+\nNzgbdB+NZ13dl1xmQYP8bhs2xoFM935XfNgIo5vJZaJ5KkYKtqr0oI5oq+0k\nuobn\r\n=IzC0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrCLh/smS0Bi0D/Dr/oWLOT/OI92WHpVRqHxBM+qOdkAiEA7uXnbZ90gaN+8T0t8G03uo1zVL74OrEMnK0Key+ZH9I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.a7132082.0_1631742349359_0.6986378186717237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.cd9110cd.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","@material/touch-target":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-igzFNUz5bnSny8k0n9mELrPjEH83an760OmkFsUAbit6HJzB4YAnZIYz2FLMaFylvpPS4KJJLGGYy8wjhJxyEQ==","shasum":"e5409156b57ecf3959321e6fa94c68ae166dc8ef","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.cd9110cd.0.tgz","fileCount":15,"unpackedSize":83282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LHCRA9TVsSAnZWagAAINUQAIMZrY07m+hwa6tv6M3J\nBdJI9/a9hfvXBadCYkegAULnnVIiTOf/3FkeQGcIbd8dL3of9GhF0CsAYkZG\nGNe3yQrYc13Vck7Tx5mEYDTTC835jWyQYClZC4zQ9yfqHZC7Q9M74DL8jWd/\nPLHJ2jvPn0n29gARN0sUiwVpGL/dqnCe46wlp1R0pVzqbeWMooSi5UhMTBP8\na1euKWRSjhvpaeaS/Mdma1soxrI/VnPmZ0h7Jt6k925TKzgHO0+aIH7QtC8D\nvwSf0a3CA/7XB4dOB96zGzOyeofejL3/kkuEcqY4AySu4buL/aLxoznzrAzw\nrptdQdKiA5jgGizqiLfrMYPqBRnY6vOoCW3TTv//ZZARrnrek69CW95pPj5b\n1oAhiBRtCNn7Se4sSHYHnZIqIjRf8eqy9+38QX5MOLeGXmMZIZqtD7jDgvgL\npeyEm7rGeFDZCX+R4RK00uII/VRTUKpeQIMOCMTVAd8qUHaa1cSDq4BDwJjS\nlQInWRpkaaaaULVm8yRjrIvG8wcHCjdqrWxA9rCjdGzCXXC3RMP+Nm4+Xgbn\n3Fy3P9nfUju6rEHRdSi6XBzRVgPEjS4cSv2CKeK7oXhGJ2AhyxQgk8vC8JM9\nJTJmZ5q2GQMSb3zkxdBjsPAHgeDAvK6HtJhTiIuXvCT1QQoxurtq5Dr8d3Cl\nFYDj\r\n=YZvw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDB9M5h5bKP+TBGdNEsfkdWTYpZCfnfDMkTywF3tQNwQIhAPaCg3z2UiqAcEPdzt0pupOqksgr0vQQRWZTJuUo631I"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.cd9110cd.0_1631814343182_0.5513256729577565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.1e5a9883.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","@material/touch-target":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-V8w20mmqNvCwsksUM/yP+JYqXopZyf/tn9xZ4oreVAHPbsnPZIzni9yfFJqKfyMUUXRkIR/K6St3p4GoXaa2rQ==","shasum":"cbf47c62ec753bc648fe10714ae331bfef784500","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.1e5a9883.0.tgz","fileCount":15,"unpackedSize":83282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9vWobe0Hlad58WvWfpDVxZCqqve88Y2sBzFXmOE7aTAiEA/Bu4gQZIqk/ZSONqH6FUTjLxp3HEZa86ndBSnEdpLD0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.1e5a9883.0_1631911150807_0.44643511885990006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.32c830ee.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Iyh0jIkOcSzHwYd78EFyXMpqQzFsDWl/cbETtLPk0zwnWRFi9ClwqR1JIUa6E6bKFm9Ttufzs7aKdthr7Y/JXg==","shasum":"7ced2ee0c89e9ef202b4b853769bdf8cd91e2a66","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.32c830ee.0.tgz","fileCount":15,"unpackedSize":83282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJutFae3jVwC+C9jmxG6BFKqhIOpFh447nFX5B/+oqpAiBXSv+cPx4tN/3za6PJ45MGO2TFBV+ywDZrrIy0mpEBgA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.32c830ee.0_1631920129972_0.432703946680439"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.1de87bb7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-GlIaS6FAYfNt3WAkbDujxJcsCT6gQ1RPp+HdCPV865uqvSvdKx3GSRhcUZnJcQpAy6wpvExteRYwyYmOzNPFtg==","shasum":"1d1883b1a35cfa9c5e03a5646875f3a8cc1dfd13","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.1de87bb7.0.tgz","fileCount":15,"unpackedSize":83282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNKOJH9gWHhJNI8Kz41rTCqponlneqKhz1pX1FB9cNTwIhAJ3AK+1Y3LcjnroftuM6Qz6dvJbmrKII13e8TKTpCasz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.1de87bb7.0_1631991132674_0.3192091882702517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Vos8r/Pt1YlYkLyJCjELnnJwf73lZhNWv4pMC+MNhfkWVsGU4niSb/twyHO36LcdQoDCzkFl2GtrioRVM1bUGg==","shasum":"c2ab2f152a20c9bf1736ead7f88b479ce3ee68ee","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.f2ea80c4.0.tgz","fileCount":15,"unpackedSize":83282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQXy9MUhd9Ez9rlHgFX6Y9cFf5CXxhyM52QuIpMuv3hAiB9Hu89tbLoZfaoklkzMoryhrdfkCEcab3Sc64zclOmiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.f2ea80c4.0_1632160497842_0.8780314868616237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.569d739f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-qYYaaGfARdz/ZKeqduTwSMw4UgTfIsUZVSXWn79rPWS9x4or3RU80ZC3u7gF1eWQT8wi6GhfZsb87FEvmDCFLA==","shasum":"6fd39fb3b066075dfe7bc96f54a48fa83ea774ce","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.569d739f.0.tgz","fileCount":15,"unpackedSize":83282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH9Wkp6Ilf9arBzxrrqSBh33+ZlKMnP3FWhdUyApLNSAIgeWoIgX62vd6RisiErLd+QT+MQknm5stUnkRdEpEyl+0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.569d739f.0_1632173033388_0.13604054120519282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-checkbox","version":"0.24.0-canary.5a434a50.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-QtqGnFDj40HeRMmtc7QeFWMyCW1C/xmy74uxfuAaAqNVn95wQFkE671kt37v241m5PVOTgkhdIVRS6PtxvS4pA==","shasum":"4780f70b76915f2fe2b43c9f496da7842ab824ad","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.24.0-canary.5a434a50.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC79FPKD3DTnaUOreKYG78yibXu9sUpe37Un4hwUVqVaAiEA7KnmP/eU2LK52HYIDTYH0ENlNOtKXV0AAscB6peV648="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.24.0-canary.5a434a50.0_1632189649549_0.0956718624439663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-checkbox","version":"0.25.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.0","@material/mwc-ripple":"^0.25.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"6be1a13e29a0f18491948418d7076fdc1c7031a6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-p7BDdJycUNKTXdXRC2Uw/gDmReKcKx77l7elMYp3vccNn+YqaqnzewfVXy+K4m+MA/SZcUgpvgaYTZsudzRnpQ==","shasum":"c6ef79887bf16750006f661f5fada7b6972b3bed","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.25.0.tgz","fileCount":18,"unpackedSize":115451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGsxcreNX/xd7qNPi2ybYO6DpyKj8o9VTGJcFrFStkJ0AiEAkWWS0ANWa00flBxvGQ6Z7+WH61PwhzHjqi8L0DYxWhQ="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.25.0_1632192784256_0.687577376637994"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-OEqSdUMlLIYOTwH4omH0hnkYQbdID0m267tQ8KaxkDP9a43HL3qBd9sPLfLTpZv2HmfJuNa8KW1uYfbda6tCcw==","shasum":"24f62c32b03ce93327c974ad4f9e604a0095bb95","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.b1c1ab52.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGNbbo6oJNKzr8jBqsSutqKUhabwce3UsKvuo5eP32pAiEA1tWJPip4F4NtSmjy8uE9NCJHNAi04CNBmPBeeFAl3pI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.b1c1ab52.0_1632193934121_0.967446050052521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-checkbox","version":"0.25.1","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/mwc-ripple":"^0.25.1","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-3Yj9QBXcif9mUqHmUI1hKryv3m/GVZn1Y48YX8sg8I4UShri2BO5pmZs6DM4g1gtk1EseNI82bBCa9QttxXRLA==","shasum":"d461049f044f444d20a8f9d75bc14a824da37dec","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.25.1.tgz","fileCount":18,"unpackedSize":115451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+OuHDy22YSRSCfJ+iaJjtIxigROhQ94beyyhe/2jN7AiEAyUa14brdH4+k74KiCFTHY4iRxCsTh005/vS0OA9pegA="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.25.1_1632193962520_0.6165875375227141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.ae060177.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-UfFpX/dUug3n0Fs2jJyU/RkOzkyEIo62+03q1xpb3ZdXqAP8S8KfvWFiy4d+s3xEgGPI3dbCf6lUc2CEZpaydQ==","shasum":"2f2ba7a376707dc18ecec306b787b8091e2f8ee9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.ae060177.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9f6Z3GnHoxWH860AJh5dERNk52fhvUlR9ICLQQ5i4PQIgCABS5rVyO3vJYGlbL+Iny/8tznTOLUYGVQkTabwU9Mg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.ae060177.0_1632235091410_0.3523906321798749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-8zddf9+WrcTPwE8cuuDHQpfwLOZOXOabfGwNKeekjeiJo3FMQOIRHogc0FK2DIizJMNE3AMKZ+japZPntchnpw==","shasum":"968c7adbedee28d5422c66d6a3a0b128d02615ee","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.b6fe2a12.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPm6OVjZPi/u16EjvdsZpwz9FI3z3p7CTkx1qf8WdwhQIhAOx0NIDz1ZIxfL94xqkDMYTXdg3cCGlooVSU5O3I038T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.b6fe2a12.0_1632341780029_0.09031881758229554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.07e91417.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-lga+ZpxGKIKRSbwHwXWp0DMzDlx4J9UYctkMCqX9fmHJRsPWMeT7+93gNPRVQPbCTcMuzq4epKB7+UoCOSNvxw==","shasum":"9e86c4a54ef5e293a0cfcddb04ae1e54ed378085","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.07e91417.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtso3DLv5rgicWocESpaDCNFCx0J47caPWh3eBf5G96AIhAI/fcmJODOvhTyzqgtd7yLOC7xPJvA5KSQZUp8dT2Tyq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.07e91417.0_1632344751366_0.31874920938484896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.e2203ffa.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/touch-target":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-uYh/JiNrs+SKdAlN8YqQ+n/NbqjBqZufByQH/uVeNuOT3DO64pSSors1IjdGSj7ezdtz4Bff3ObS+SjjDHL3uw==","shasum":"ca743b0d5119ee1516c7be3819efe7ed255f5aba","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.e2203ffa.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5RpKguzIbz0PdKR8mgbfQcNZ1nFRq4xru4psCP5cCAAiBmo4pxD9QgC+evB/WbCcW4pmW7G1AwkWXNzO5ADTInsA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.e2203ffa.0_1632421661526_0.3973347717871929"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.4abe237e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/touch-target":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-KNhWLRxF029m2UJoXm7sG9vIF3rAMS/jRp1espWJSci9e8sxZtZfoiMyaVLTksqrWDd7oI2gCNKQVXb+SePeuw==","shasum":"a1ed08bab6af893cc10c8ad6e9b5f7157603e1d8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.4abe237e.0.tgz","fileCount":15,"unpackedSize":83274,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvUlS/mz5VHC5FvCirK3alU84n/K1Iyh7NupqUZI//2AiEAwEV9dzTmgPC8d+kQHL/YKuKsBJTrzazaRVrU4s3CB/Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.4abe237e.0_1632504672070_0.9575707041395358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.6278ee5d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/touch-target":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-IQDLfzpLPGpwmk7LA9OYu9MWpGOYRDzic3Wu9wKCxNCT8V+zUMY9KqAeosXhIUNM3kH5w5vR/G7ZVlUULEFmig==","shasum":"0e02ef2a1e05895d1836b39929e704022f7bc951","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.6278ee5d.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKRR5eB6QAeySszrH554tykHrFKcJRVsxu1tKVOc5pzAiBEZaxBIYxPjUhNq3c9jct/vyFsDsIPexB3Or5O5+XS5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.6278ee5d.0_1632767485256_0.35911800126012894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/touch-target":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ZNIrS8ecVCUQVuHIescHBGwW0D6kbEaX27emeelCFAapdfT/mIWcGowMpZv5UEqVXmuQ+YUouXzKEChnev+/5Q==","shasum":"fe6fc6a224a0e815525aadc0ad77899ffb8d7ce6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.3a5d5f34.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHLpRe5ptiN6NIU6XZuoHTo6rBi5t5SiaCk0PJu/ohVHAiEAkz0xuIVmP8MdE5ZcjbiuIU5dj7C08dHZId+2rQQQba8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.3a5d5f34.0_1632782495410_0.8973821797833357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.143ed3c8.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","@material/touch-target":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-WTiXZm9zSrAKUEVOZG0629GxWxXDHxv8OIFTGp44X6kLi4iyI/06vsd4jQsLr5PXqmDM/E4JtkoJ95tQ04SVSQ==","shasum":"8e7da08ce99fbe59d2b4b591fe8e7b606b934319","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.143ed3c8.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX+b0h+Dr5m+dWp4KuNuNEPS2GSHVESItRzLc8s84lvQIgcy+9qZNBjmrOP157sYcUwHmZln1wXI1bBtWyOZqR7HI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.143ed3c8.0_1632880254024_0.5314578712300728"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.e5923d68.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","@material/touch-target":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-4HlEVu0VOu6dCkrNX5EC4CdnuKdJwc5kg3EjTBsK1zWfehikq/71OC3LyicKn3Dmx1ovpX59DJX9UUaLei2lNw==","shasum":"1ef9da3aa1db0a0cb9eaf16ebd865cc0cc8a10c4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.e5923d68.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpsAB0aDgCXXAdOfDLuCJe92xJqfDJfzn63c702YVLigIgWF5McmtAUWJuhi+LDpIVZaO2CouxhHam7XDdId2XtaM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.e5923d68.0_1632960353136_0.6996419838650969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.d8ed5109.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/touch-target":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-3Xq5rSMUaLe6ZNZTnIeXnbctR3KisGkFE+EQotUbWILANkCeq2GLJDENTN9ERSF6RJXKaXKW6o2x+fCaucDl9A==","shasum":"201b1699781227cb7271fbc5ae6b6a6cb7f7c95b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.d8ed5109.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4I5t4xJ30/ofIYRu5Xd6nHXyMJ/y3GdXS6exoApcjkQIgVdtZjHa4uPubvl9FLHBxIiovZTtN65mFBrWD2sL9hJg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.d8ed5109.0_1633044836489_0.8635507801604696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/touch-target":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-KJeYJNT+guu0UTSOZidTeEWsPZP4IvzWqjzxM+5wcCtFkTSFDjY+6EwIKlh1VfIbYCyNaBshqto3muEAdu0NOg==","shasum":"9b0556fcb544fdba6e858d8e9ea7330cb59d093c","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.0efb9c2c.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKpfFQdLmdRj04tjC9tqHISmqVklSa58yNI8wxCwLZ3gIhAMKA+f3t82ZvZKLmhlC+AgXRcyyq9wVFhj2p83dmgFxc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.0efb9c2c.0_1633140500462_0.697131486904621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/touch-target":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-x+ayzVnMhQa+kXU0wMZk9NCoZjAL5pw1dH4tZ/CQ3aLrNlxXbqYNm9YFvN4ywkyGtNtFHFhSQstsGYdKiU5cpQ==","shasum":"dfeed42e1e1a6ee7398ce8aaa6dab2c5c7965d6b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.1c9adcb3.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6heRiE8j7W2XPGjR13QbqEkvRNF1uSAoMI5vXnuRCRAiAjU1ZjNFC7cETEjk9E1ywTrWPOPOW14yKqnLQkJ/WulA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.1c9adcb3.0_1633368816966_0.3087215652554607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.dfc00d60.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/touch-target":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-pDBPlEsSOx2ODk6XFUi7vzS78sji13jbbyYlx/auk5kTJQF/HnnM+5mYS2IGwqvbo/Kg0qGeOmDEfEnkbgA56Q==","shasum":"f6d35c1c8f69ec91af92e579d6f87eb8c567bdd6","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.dfc00d60.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1EgC7zdkNZhm75i38ZI2KELBBMQjn8GfrhfAj0gLcEAiAt8J+K4T9KeRmEgpHepWFI/1JGNUqZ9tWwokCX7M3gNg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.dfc00d60.0_1633741038755_0.7464050488102412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.c3aa844c.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/touch-target":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-93K8Wg4xDpU+0rOx2KynrBBoQI56wBvTNqqFtP8/dqyuBjM24EIsbucwti5HZN5Et2g+yf83W7bSnWfVijyPew==","shasum":"a56e819d1d58bfc23cf631cb5b0ad38e921e4a3d","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.c3aa844c.0.tgz","fileCount":15,"unpackedSize":83305,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGX9Wit7DwzKAcPn9f6m3YKWZrTFWRe9kjoqEgE4MoOAIhALJa4k9SOBu1GhPOFAOvCTnmAyGlyD94EKm+9fSNI+nd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.c3aa844c.0_1633994064798_0.3613737754904167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-checkbox","version":"0.25.2","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/mwc-ripple":"^0.25.2","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/touch-target":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-evuM8MpEjgzDtJLKNMtnrg7IXjWBtNEOQsDLm2wjvggQq3I3SAGYNbgh+sZG2a/1MlkfQ/mpWZp8ZnaD9ScjPg==","shasum":"d6977bd279b2f20fbe96a0ff605b62d33cc147bb","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.25.2.tgz","fileCount":15,"unpackedSize":83253,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrqtEo255vHHwNV3OxIRIlwVPlLCxChn9+5SRYYVX0uAiAef5lvcmO/OVR34xT+BHON0aBfORL0iwRTDo1s8LJq3g=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.25.2_1633994313403_0.44029680591120535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.406d6fe1.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/touch-target":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-wHhaY2M2E6D6jCtUhTNLGwbDaqK7tZ5SwKpjcfUZHrbgaxBy/7XwAfrDT699f7eXP/dyaiiPma9s4EzYgAv9kw==","shasum":"3b9b640a49ccadff46fec9f6791862f4456ded5b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.406d6fe1.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD8GJ1KOeNSP0ZEDkGgpkeGwztUII32kn91dPapgrrRAIgDfQJxYrKy+Qy7Dv0VqeYdiWaIRm74FcRcUzXNyj8dxM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.406d6fe1.0_1634158771827_0.7392043738820113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.ca0a674f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/touch-target":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-L36fWDRuAr5CrR+/bmSSrdCZAljpyY1ZRVsX7/HpZGEAkQi5eIRJDMyidahlRwd56f1AzijFdLCXMp+6oZmApg==","shasum":"efccdae2f0f1a68fe15cc66b15dbbe79602ecb51","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.ca0a674f.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6IRkK0azcVPg3HhoLwxWybrIWrr/hPdrPz/CMYzTK/gIgahL7WJobxEX8yeow4DnoVYOiy6eGEd7WeuHo02AR1/4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.ca0a674f.0_1634593020055_0.9569279574460652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.eefcf660.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/touch-target":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-W/4f90vBrgdCkHXN79F/y4GI47AeVlTLP8ILa2E2nndLwS6n1okfgOe6tK36FOllrPVO2dbcAmuT1IDWjAWV9w==","shasum":"1032a1dd2126912ab6603c9b3c5fcd5f3426d82b","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.eefcf660.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErFb7hg2sGTQ6DGRq70iIFuzO6F7hybJVQahNcRAFfbAiAmPJbKgGM4FdlsjZbsrdQWuvqAVQ6zQUP6vix8aqH6qQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.eefcf660.0_1634765020989_0.09397720162941492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.d21acc8f.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/touch-target":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-oGj13xoXfBB6rj262RpBq3VIAsFX2sFvQu7PU72XaAKIRLvNY7l5qwqmJlnA3MUO5MIWhmprlxvoPD8+0rmmIg==","shasum":"2d784fb50979b5f1a0efff50b3072f8feb438141","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.d21acc8f.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoDX/LGfRAd9KsuZ65O3fIT1zr8/bbNAlxosrl4VMoOQIhAKe2JzibygNWb3FryKsDWftVvwauEhONWg/S+GNH8+o4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.d21acc8f.0_1634769153400_0.9533874011028447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-checkbox","version":"0.25.3","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/mwc-ripple":"^0.25.3","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/touch-target":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-PSh9IAgQK4XiDzBwgclheejkA4cbZ3K9V1JTTl/YVRDD/OLLM+Bh8tbnAg/1kGVlPWOUfDrYCcZ0gg472ca7gw==","shasum":"93fd75b301186b4775456b8fe5155c9417e8fcfd","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.25.3.tgz","fileCount":15,"unpackedSize":83229,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbYGBSC31BOuFAYvzml1J5lvWCn3f3pupBpr4znDYVjAiEA6fsOLluowQl40Yoc0NivTOutxHvbFaxfnPPmpwqjdhA="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.25.3_1634838944396_0.6441952129045221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.60449b7b.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","@material/touch-target":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3XsxirL4+ilKshBAa6RSjnrhu0vhpnUd8eqVZaaE6V8O86toJ4HrcLdnMYz4mR0wbmFgpatRFFqIx69EY+dpRw==","shasum":"cf82f52f0acf5d928d70b2a6f2a838b01dcbfec3","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.60449b7b.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUFuSq8Ve40crfpGPpuzNqVWKoGfaqa4MN+lRsAxKxLwIhAP7VyLlUJ1q3A3g4QmCiwby3GqcMyeRKlgcpIR3lWBSr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.60449b7b.0_1634840250801_0.4706009943702678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.0d8084ed.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","@material/touch-target":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-VCvTqG9GLmuS63YVGANmMK47D8Y7SAsKfslSSMysSFZ95rNDbrp0vzAUz9Dhwii9hkw4v3Cnoh8+xSQ2BbXLMA==","shasum":"49675be7ea74b6beaea6d69e7e2500e8ac5cb3da","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.0d8084ed.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZio0PFpVjFWl1wH4zyo/dVULAJ1Jn1uAeKz3DTxVtCgIhAMbZBR8dheRUqn/UdG+zbGJ3BPR272FMIigXPmmkP+WU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.0d8084ed.0_1635443098684_0.30044505286566126"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.232327ee.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-5E/VT36Kb/+nn8rtK55iTOJJWZB+T9oV4h40MM1VxCuVGnaYR3gmNZ2Hs7zFl1iERYP3jHV49bXjyjwVpHGayQ==","shasum":"9d60703d54f4e54c2cb4046493f70f368a450f75","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.232327ee.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwuS/6dfJF4NzrerlhDwqczwtvbgsgr0eaNqPjUS3BEAiEAyhqFiWYFPdTZyRSFjLbnMjOwMfsWrldhpaI0zixu6/0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.232327ee.0_1635797749929_0.0658938592128746"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.0a492ae8.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-zbqBPPLF5EOvtorAVn2EHpAzgkj0qPy2X0q9rObLQ2U+Jc9Ytskz7b3StxvKrDZ/BQ9FEoEEYtEOMcxR6O9lPw==","shasum":"34185032018f737f9d1ffaa6afc4ae14ec469dc5","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.0a492ae8.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGxsXVejxd48d3dqyUYaV7VdE13tkcr0FNv4jijb11rwIgaHMCx4XpEK2huKkWyLFMZT+fFKJeoJrz9sYPf8jAXwA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.0a492ae8.0_1635847228621_0.033732220318225536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.0aa18745.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-l/Jiqbo+71HLY5SjY0Pw1PLydWLExsT4prKynax/8r4UqgwZ6sFdJglOEWvbQI6GLikFZ2frxcWnkFUuWM7t4Q==","shasum":"8ef65ab376dfc67363b9cdc5712d7c0a5fd1ef97","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.0aa18745.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+2+H6kBWJxCS5c+Vwx+GUKeLrMj/mZ9fppKBgua86WAiAOZ+3ZFdPGCCAkXCP1pgun8QlC/uzvtAVC9N1idimzLA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.0aa18745.0_1635876475247_0.590806561729361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.f3e28323.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-M5DlMft6X0FtKzpTSEz/eS8IigwKdLChzd8SnQrvCFgiSevDX+QXw65uWqEmngEMUc2TJ+AKwGoOAUt3R+jomA==","shasum":"d885b170df63c288c0ff9e52b8f0ae3d7c6c3936","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.f3e28323.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmpeb/xD+FyoZLm9rqv9f77NTIOyPQQ2VF/UiqUjhtYAIhAOzHszPUxqQq95p5wV8G2JY4YCGWSej9BRlLboM25vu+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.f3e28323.0_1635879577910_0.8773503734508699"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.27e05c5d.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-a4tlOWFAV1521kSV0bdB0UJykIjwJOIFVam4dbQWHrIEalq2bI+BNtQwC0QlnbhCA5XFQASHjhaOWmIGrVjMzA==","shasum":"56a4d3ac412b47bdf098225e5d951d01c336d6c0","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.27e05c5d.0.tgz","fileCount":15,"unpackedSize":83281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnfl+TiFXCQYV6FM8HSNzbdXgdUJ71oYFP6wFlAguL+wIgNmFlrUpAwrjkkcAqKRY70lZ7mtytMWOEZosDGAb+rVY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.27e05c5d.0_1635965103104_0.6773661860840183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.b9e44af7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-8w7Yz4ILeRAtIWqme5YDzSAfYwx8Fo8P9nUQb7tUdAtcMocdULBAvnNw44TuzlV2seQMv9ruEf6C3BEYZRVoPg==","shasum":"e9b73f50ef6acda0fee3300e1568a099fcd988d8","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.b9e44af7.0.tgz","fileCount":15,"unpackedSize":83290,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa0/IQBSLVTu8+ZwfUeRdg/i69FH4fPaOXWgfy5zYvIQIhALz7wMUh749WpuXpneOxgv+EwoCJfMrPx5ajqhf9ly+E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.b9e44af7.0_1635966246642_0.8323771015519414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.448f6cb9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-DkVuL/L92fqwq9L4fhtRwE4Jo8Q3X/vunQ/1+ifcaeVEzwhwijcttYzd/w6nZxlTTrln2Rwc72gvfWS7fXGoZw==","shasum":"666405e9fec2e3fe53b381d6999f7a31e221d933","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.448f6cb9.0.tgz","fileCount":15,"unpackedSize":83290,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7Bgrt1qhpLCCGUnN7T24lEG04uQsOXMKiEvjpMnRJ0AiEA6hpbihq5sMBM4TEpfLMLMxd1msmZmwlYllnsmePZRLY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.448f6cb9.0_1636049278140_0.31847822617736243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.8067ce28.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/touch-target":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-CPnw5Y3HibKCpnKdnEEfCTK1RvC5Z2JusAOk+yTuuSIfcEzAQrUmFwhucU5S2/TC0ToNncWgalOCz+ep9KXUUw==","shasum":"bb11a26a6c51b375aa72c6819f25eafb0f2098c9","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.8067ce28.0.tgz","fileCount":15,"unpackedSize":83290,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9aLcAdrDbIoqb6zrKAFJUC39jKm86b5xo4lPShyaEvAIgfGfrG8kbj23mv6K0I2aVgSh7PmLaEtXoo/BkVNB9Uxo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.8067ce28.0_1636064550776_0.6096061372543355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.345c2bb9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0","@material/touch-target":"=14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-sDKB8zF2/9s6ZScKQ5Lv+mR5Hrzdxl7sl0bK4LuljlgaC0F4fUrrW3tjHpGmZSOD3Z2F2uDGzo0OcdoCay68RA==","shasum":"260356d69cd42dc134f54097b7924e9009b63a93","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.345c2bb9.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP33CRA9TVsSAnZWagAAJtgP/ivZ67yhFz5ZXrdOdxEu\nDIMXsp1uXtLolFU3HCtXg6OwMA1kD7OiZv97ICG/noKiPa2Z73CHje2MSDe5\nqj1WefohEpYTXN9UJ8J3rOMbjoZX509xsdGS7TKRksJ0zQrk1hkhslF/Xpwa\n1FLSIQrgRkR/mM1Z3aSEYEACJ21QWkL0Zx4yzzjuTjWMEGBGUv2DKTdSUVk/\nv6t/ilg+UNqAzfBakCvBGZW4JKxjVYdK/xApvNuh4iGqSGh+5kz1c3PmTpy9\nhYecEyt2I9CUulGsvNtYGiuF7D36CWG/5NY8zRvnMgZI8IX4txMX6VQLfCe0\nqCjx/9+5jlf6XyIjVFJulYyxHu0lDR1OQV9hNE4HbDPSG7sJrjsOv0qEL6pw\n5s+L2HUAgccSsSvVyawsQIZNQpiOA+/XQ+1jupECn8rONmTE/TzwYB4VxNim\ncVQVXamt1QsZHAo7i5PBU4zRdIufwCPDeq/XlGSB0Z1ZcRpgMKmEgfsbo4Hg\nFY+DUozLNWtkkcVYcu1+cJXSKeskKb5vptkiqaEdxfpup6tPmNYRZUkNrYen\nsPgDFCMlBP3n+4vx00DXL4fn0SL/n4zbvNsnPV82Oj4WFhz99shDKsIAZuM3\nxfz4tNTuR6H3zEiDP9bsN5WefGyeAkOZpC7xW4EZgzikV/Iedv0TgyaEBXX4\npuaN\r\n=kZBK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPBhZF6vSaP8cwg8pFpyfstajvC0RcF/ALZvC4Z469xAiEAxU1hzzI3Ftn+HuB4bgaXZJl2VKQvA4s5BkT6POoF5So="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.345c2bb9.0_1638465015686_0.7983611570096694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.0547aeeb.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0","@material/touch-target":"=14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-44VVfB8jiwvdOtMX5pGpdIad0Ar/ly9YRes+eeb8BsExQmhbsWi4TvyisWocRND3Yiuxsfra2rUdODMRY5uyLQ==","shasum":"ed7df0138ebc14e162d04a48e8bc41e21dfc326e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.0547aeeb.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjv9CRA9TVsSAnZWagAArxMP/0y56xA57c2BRp6Lu0Am\nHl5TBfMxNKaeGJw+P3RM1SFa9gt+SCtXiF+7Wx/aRBSKekiV0ks+kWvAe7br\nB5gToPJJmLA300EfY19FUN3C8QKNNDLy/xBusHl/30TiIcVDSnSgjLNLB611\nFbLbyFJtMGOvxwqgPLSWtV2yYBsLxxJAY2rQZAKEKcNqa0vMHa9X2lStYXJ6\nmvuar1UVDrRPJV8fVThOme1BaJmpiq+H5OwUIerh71P7Yz2Tqgq5D27UuqI1\nnno5aS9/pjGrw9KvrvBNM3sjIr0hAaiTv3Ad6zrJuMLWEpi8N1qNLSCmbIpt\nnSCgSoFeo9bA19OXvEQNlg4R10bUGL8c2bEm8194t/yWvp8haYnhfoYGI9p6\np816e9Jl7qnXFNVhwxUkxkosYOILnw71epnwlf9+Qfm2kduZWUY15Y3UC0Tv\nJCGRqu3erZeu8PzNkuqEev0OrNRG3eOtTFX4E8rXSj50PlnnoOf8GTLG8h0n\ncsQgcCZZwEYXvn5BOJQ6DXwKimZybMh7Bh4eC9SpqrooqUU0fDRg9C97m1mG\nqTY9DTt9WfnjTAskxscpKj1yKHTbgps7qI+i37T8AhO59CCJYWt6n+wXykFk\nRTrt1sdyFMAHxWU2Uxo0JBWV/O06mYUL2p/tdhW026NS1KWJLyMI2mLc2DeO\nXoMe\r\n=CD0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAOsf8S5X9spf6TffRlKF31ulQfdaMNeOgYUQ0oFz1S9AiEAgF+ZDmpbd8KUgfubs2J7hTTBKjt7bzyPiHJlqPRIsdk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.0547aeeb.0_1638808573441_0.46689709728049156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.3b2452cc.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0","@material/touch-target":"=14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3RVJ+OByCcYJVBf/zA1/3CwIWfZrFh9g/MDukK/szh7/aWU3KLZAjZAW0IyYtwIqytibyXuwn+mXOxpGjt6czA==","shasum":"8b67fd51e685162f9f37d38e2d9f352b7ef29710","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.3b2452cc.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhaCRA9TVsSAnZWagAAq2YP/1TjUWyyWeHFqWOq0CO7\nzoJ5/Is8jfxadMUVwEqZA+iK8R9dm+IZa1n2DSjf87iOqTLh9Rn4J6hKXhZE\nrYiZ/AYKjCrkt7RFIHWofDgwrAeY0HNJyVFh3KA5L1ceHsJ8arYl9pUhCilk\nP1bH45tHsJuCbI5QdLVqR5fGw6AMPA/USM738IhKnJ/PWuS5TpK+Du4OgxMM\nausC1p+kh6lvyRycH2yX0ATzPCKZjmOEV/2eFpX5g6XyFlKnao+z5+ucYaWZ\nBtvCTXEqOZeeNYa5ZvKxKlvgleFPid0Cw+DIS0xe05d4RG0XZEXZonSc4Hk8\nC22lrgd97keCD79KjLSP8Mbr2WA9hBCZHr6KZleYhqRJWr6LB83Fk3xVP1dM\nRFS7E0ANqRm+aiZSijQfVWi42oisc7S4KXeLopSre5AezxXO9wkheQzO6NOB\nZs1R27KXpaNIV6kVben/aQ+b0eHFINVA035xG5VoB4WFhPhVBHSfC7G5T12B\nXikvGZ55hkRDupEqZgROe7auMhA3lC98l7BPMsTNcT5dLigRXi931n4yTNKX\nC8effhrPAINe/Ep2sMGnU9liEDoBIU1mT267V5dZSkMDTnUYqumfiea4MKsX\npEH0tjikFdLNLYW0BvZ5SHYu8bsx/pnXUg7K8K3qJt6Hf9Z3acS2xrlWXLOW\nlF/c\r\n=bfku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLpF07GvGAhG9tAgQ1raN94Xz5bvnyl7qZJcWt6mBbVgIgeMjinfnitbQhla/ssS7B5bRHY819kruveN3DZEc+KpI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.3b2452cc.0_1639008345621_0.6313258295034805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0","@material/touch-target":"=14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-uBKHLdmfk/aQZgCW0434ytaCraViZ7U9iKxK//5TrSSXfjH3yeHO8Op0qTZRbEVPt8MpfDbZsz1yAoKmt7KuuA==","shasum":"b646e5204381d7594c710d30f50a9e0aee973c76","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VXCRA9TVsSAnZWagAA0RYP/jiy3ZFsOLjy7jobPKRO\npLA6dF+QHMSWkDmMwqhYuFrdrl3gcMrucE/gp3oM7prJkmswb5cvvROqH6eJ\nezLotvHhg7wChdAd7OVBCfXI2sGRt0dw4ww2qBe0SNXzgN2+gYlDuAsjGgMz\nCXfUAR0DSHCgyJ6y0bB04zz47/DOd7AA/zH5SsR+RWC9C9lymeXsj62Xhk11\noY+poeyk0y6emfXHwnMm5ONQhWTsYnHf05OUBK4kfGYe8ChqaDY3MtXo8whg\n+gdXOxmb6AUTgQAverwmJvlSlnAjUYzJkX2JLHfYniXD5m0riRKDx6/dLg8J\nv9d8FXc4mvEevBnGPA7r7QmCA6vuuv+OzGvAFRlmZK/LeUq4plE9qzTh10Fb\npa9G7b7J/eOLfkynygps8k77dlsAYzX3YCc/SkjXYuULS3D1oPmW+86r4TvS\nFByo+AYfqAKq4NiLU5yRXhHjeZGqKy3awas3GccmY6vMOURxO/a7lUdGCWOg\nRtN70GWdJzH8dDdjmfbOeUdR37V1xSOKkXxhLearZSCEwLJd0WO7Co4VHeW6\nRXLbBM5jKCIVkk23ep4cAMJXnszKZiwI+kzTqCjvuwPvyr3I6hNrleVjHy55\nJ5/tDiXG9q1tyrDhmFInR+TUGclVz7hUv7fX9yo0RkbNCPBhY9EfgKM/SKg3\nr8bO\r\n=+CyY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHOmLLRuBABthKRRDm2p10lEdqi8+UO3jKFoPBkq91S/AiAm31yaoWrR4+cjluh2aOVRqqZh5qCcNhVSontMTj1t1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.cf7ba5a9.0_1639163223165_0.9688763805433884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0","@material/touch-target":"=14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-Zb5WX3vc3LAY0i2lFooGMA3ICUTZU7CI5FK9mB/iBSaPjQLntBNWxpf18GDMQjDR0PapgTVg8IVj/qrvY+iDSQ==","shasum":"20996e4c77229f4ee1255060cf8599ae4b0efc85","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.e1bcf14e.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3d2CRA9TVsSAnZWagAAVaMP/2sLN3fjLhYdrjC1T8xf\nqPLFpvC9xoe0x1MV2tkws9PvJcCgqt7YObCjg2D/xkPxsYza3s8/OY9Axhhd\ny/bgHI4yKENJ/U0LM+erurU1E/DbaN5rvVLJtZ1LWaAOA/efb/dtevslox3B\nDSihZmLOXL2sZqaoW5mEFGSPCYhBIjy92n/fYh7EFLnkJxvhilGqE+NA3Wjk\n2OE0nFz1OVakUHhTsH3gQ/KHcY1UBT784L/d5eah0CuFoVCKWQOJtdeOCOAX\nwloQnHFgkwSkdlsc1+vzXFAcHowMRPbkca5jCF4zekUbEQtvH3bTVJjWlJ2v\n+JAqnnFM9LluTfPpE+vUUfZTq/q1U/KqcLh6qvo2xo0qIZBkXQWtDl9CHX2s\n1wbNy8JRTj/5K3DL1vTKHMmjEF/SXPRrk0XJ6v27pisfeS3RDCsyZrkhtQKG\n7DAYPY8uE5ev3x4Z4oRyB4n3ZGEZQHhK7W/J0zUmxQtMjdPuQ+8HNhCzpVzj\nBP0P8Xsrt1Ctlvco6jgCtOHoaddl4lnlZuen9rOSSVg3tJ5iJfuTDC9g5ynW\nGHgzCHi6yblILFZfgOpSG08hf6x583yRFNtWJdmo96XOHjOgXcd9HlonfaY9\nwBEdH7gZs/8BVD6bUhw8BdBE+Ab1ciBFVfNaf97U/r2pCrKBD/rdGbqeh1uQ\nzv4x\r\n=ptKO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRv4i0hRLXfpQ9FxM66SVe+RnASnzHB7tQf+Tu8pIhEQIhAKFefVtTm2Qqngh7EKYG1Bo7ZZs8TfQXOUrrss4jLfaH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.e1bcf14e.0_1640724342218_0.6760256424901183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.b9d35b69.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0","@material/touch-target":"=14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-dTEtUmXww8SccBBRT8SCqM87h0t+7kM9qfNetGwdQDrE4d7Bs+CIY7MpQXBVtufUnUbKiWRjgpCY5CsbZxEwcw==","shasum":"83dd3f43e4279fbb1bcbf4b8480d210d7353d76e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.b9d35b69.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eL/CRA9TVsSAnZWagAAP0wP/1OtJBc84ZweW0zFg3C0\n8VRRS+ILZGmNgV3pSmQMFKZgd5dsrTnGBoGYwMTQIzv/i7u1kru/o0f2qNQ9\nHBM0tf5JtlAXc5JZ/ARXvplbNeYJweephDS9sxuKgzMGMa8wacK7yXjPInAP\nIJYquOWWoCxuvcZp7w+pzkx9nMHIaf4WwrINdwk7X97xjGk49nZuCNAFxRSs\ntDnEfbBTZQ9nhVk90W1JZ17zHybUgjiZr38CpzH0QiW9sJKYLGaMwXqYKuWZ\n00ldWpCXCHCvnD5+A9eMZWxG3I5RYRgRdp1h4z66z8QaHfv9XoiOY/aJDN0u\nJuaqEfWzLdvDLDNFxk2k40MbHS6ZoFe8oJMvBXV4f6i97xRKrb6rMkk2rqD1\n16sx2tc4gy7Qcz7ftcuRLtRssCJVjghSV8CEKaZE+i24O5KamwkS+XR+lsAD\nQij909mybnm+HHGvLNHL8vih6Mog94JqBalkWhkW1RO64amFlXxOU2Ifknpg\niQAAznrcD6cTTAOpSm891iPUGYtfMqWHejX0weCELOGhk92uTa3dWgEoz2da\nQ5XcgKcwnDNLq4QVv53ey8kT3rDYiYN/hTKKb0TFS23uHVJnYIkOxJlrstoF\nUs7iVqzRvGPqLRtIxzcEN9l/cT3gxPl1ttqJKPHfp1dXFwchMcq7lZ4wgGUe\nBUbd\r\n=msdU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi5fbcBfI/M+sak4NlDeqR6n/UfvaJneTQ/0u6ErqtmQIhAKLxGobuZo73jeFETm0n63kWGHgZJWe4PDNdV7kn1kU3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.b9d35b69.0_1641407231131_0.7070384046209106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.2afff08e.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0","@material/touch-target":"=14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-zv60Tr25jFemrgI3Y98/cDdWqu3edhW6OqyLr+rxCz4zvPdHgystZWSJTgMHWxzMdZjs5eBNkqJbE3H3rIgQyg==","shasum":"618bad1d3582d4b6cf3589e736f165a566f77933","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.2afff08e.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vCCRA9TVsSAnZWagAA14IQAJhIcoxRiIUuOxI9N0v5\n9RIJFtYh4x7LNxVkhDW6eWjsytYMoIO7e6TIP5koD5pmTUNWH6B/Yc67CggO\ng8g+t47Y4fCdyIBC3OAHwaBn3S9vDcdSm7GwqOeNtIC2O9xe4CIkRR8U3eLS\n3GkOz6ko6td9xkkcvuqfDo8JtURBJkj7RrmUEB8YzAGRjC75GfLcpGGSwwDH\nuvhtZXgPNWTaB3HNGp5uG2C+N9FhpRc/gc/e7RSw0aVOuux/SQbmlosZo+RL\nk8C9FiRmR11zCLhW/EphcjqnDcX8GgAgUlgnCnmaa5ecNwv8cYKRcph8dum2\nPo6vFDoxtHJLvRdrDJt8+cLdhdQy3OK05C7v6CbccOw1itJUlph3E07Npkky\nkGfE6VGijn/Q53EVoz3ESJ+qsX7dvZ80Elxoj/YCrLDUk9EAuWJBO1vfw0KG\ncTFsOR13oG8Q+8IJZLduhTtiDqqU/YHl8K97GNs8VpYac/d5ADVK3QoxKSWl\nJA3K9OKPB8od9gs2g/KCAWbcQDHlB+QIZ6LxWkk/oz/qSNPSLn/iklq7wdKF\n4eZz75VFp3dAmFW2HMavKy+kRQbM+WrntJ0g8xMh4CoJ1NLxE3Gd9xKwApQr\n1DjQPWC9B42hpJ8kS1jEzfBPlQuWpDLotJ9I2FujHFAY7gTE47Di83mzafsC\nFay8\r\n=ZlLW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIrqITF4jEs8ypnQSSGGH6JP9wqgA6xUs4bYS7UuwL5AiATTRXQ5bLajxT8cfUyBTfyiGKxJPgW898EXthpH2CXlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.2afff08e.0_1641507778065_0.4737091649783345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.893fc857.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0","@material/touch-target":"=14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-LbycmgO9UbzLifylx/2HV8n7RMLZpF2UYx6Qnt1gGXHcTdC1VGpH/McMcXquPQSPcH1ExBSGcb9KeUw3/AuOVw==","shasum":"c1c0bb728baa668ba0c4a2868541cf0562046c6e","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.893fc857.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2Iw/CRA9TVsSAnZWagAACj8P/3+CB7L19BsOeWKTgGuc\nqMuY0D+vka+ItKNff0m4gc/5/QD2N+rRGtG6/YLRq3jXMdO8VI5NUz2ibw46\niidpjfeT6NVHc63vIlmidx6j0n69XB78tk5ffCoGYqag6fE5bjEJ7qjqAzMW\nJzV0Xz7A2vaIEelvZm0+5L9pyotbrCnY/Hvkkx1Zl3s8OfFNW3b7qcJi9WJ4\nv+oPXTg4UnKPEZzioWS8Re+Pr5YCyCOglVJLmrbYuVJw61HZWwDBT25cZ7Wl\n75/g3LT5dvu1B/pWikwa/fQ5wHMnov7VT2oSEKa+JFY0bNzXAyReFWrMVf54\nGo1UvfJKuz8HkSiXdWyaXLQBznbvQsrOYyTL/qAvG5j3YzfLNPVRwQDO8F9k\nCApsDK27Pr/EQOzQucwJJ+L0IXiGrvHLUL1qaGk+jlcdofCnlsCCAc33jQmr\nf8DTReSD75OYreGE7ibA0bk0HIEs8ncqb7/AF/ABDqplTpnBiEVInaLJeDxw\n76b7stJtCNw4Q4+1GzTPFrueQdjftaW+i0fHIvWWqS62xjKzbZZFh3QtR3V1\nmCH5m9yeuPxQrHyfn4eJRJuoQLlKPZunwHPw5fmm/ek0ZvSKaF/MORCXFamL\nIdzS8K1OdsWfoEVesu/xHPdwzAG85HJ2hL5oPlT76QnNuxEKu4fBHJ/v+Fwy\nfZqI\r\n=2bOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGe3qRNzBaZXSesQGOX89C8pgYrU4vvN+IZkYL9JbBTUAiEAxnhn/1FqxidtxFgTMhUMOkmIDjxjPV1LJqY4gM7xXWg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.893fc857.0_1641581631150_0.05352704521080631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.69ba13b7.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","@material/touch-target":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-C9WL8ENMW1q4XRRVIVWNPjR3z99Ks4Ts71jRA7alZ+LkJ3Pk7PdeZkXW/jUrkAsZwpT4AxSvtIIq1hZKUsxK6g==","shasum":"9e24f8d97948f0444e120237bbc39a646e5ae485","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.69ba13b7.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I96CRA9TVsSAnZWagAAcjYQAJgKSkjAmox5C9VFsBQe\n5RV2S0+PrU7bIwlRkdRJxozRNZtbKfvPISFqJfE5uzefOBWPhII+9Dz/csUD\nkSyIcvLEA9EotlFSsQQAvhC1rFvYOnXz3u9YQj+9CNYiR1YOiP9pmK4oG6nu\nVl7jllGyByYF8YQ57tnjfZduMXevON0rdmMLnTfT7EZFvVJerUeVqvsrQIFZ\n87j97akp8U3+vNhIhc7VtLVMBb8sJFS9AIIhXcf4d/8QJrlyYD5+OtY5vOti\nZNv8Fm/oWq5ITm8dRuQpScEpIBTMPufe96S4G5qAFHVO7XlIBCXxZtafbkLQ\nw7B8RgfVlOruNtUrQKai7EESDswgPwSQRjVH57WNVpJVQ4WRO1MVrE7x5t1r\non/MYuFihiCJ0Ts24H/gfVvN84ZiqrKFFSTy8XhwxLZaQbs6xMYgNlGDaZAv\nb5jbzsip+6PIvbiBiQbgUjklaVNYLXBGVRGsQSCas8bhgzphpC3ES2xouU5a\nXNVBKop0lEji8MHFkRNc2sVQ4G+Hms0zHp3aOp/c2tyETHly0kicOm9w5IHh\nEaRrVs6+jKQb9RTdcqqsA84UofMLBYxGp8YwQcvEoe3rQ2UZPufKkVe+P4lL\naEIYu8JRFE76OVYboxel3xPK7Bi6oUh29oE79OH1aljtohrIbVdT2yYJZw/I\nn5oJ\r\n=HBOL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1tcHqUMigB1FjjJcGrhVXqeX36TJsNQaELDgIiM7TwAiEAp3OW4XwFDPzDNz++hUCAfHGqhXWCPNcj0LuqDiWzIqg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.69ba13b7.0_1642631034019_0.47291758665450145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-checkbox","version":"0.26.0-canary.0af8ade5.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","@material/touch-target":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox';\n  import '@material/mwc-formfield';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-EaQrofV1Is6D99DNyQ4CUgNEvJP8gvrtu/xeCOgTtECz/VWVj2S76pXe/C0y/NpoeIhY6Y0qYA5ocj/TPGq08A==","shasum":"42718ec3e8cf418a9dd6b5b3ac0928ad6c5d51dc","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0-canary.0af8ade5.0.tgz","fileCount":15,"unpackedSize":81456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeXCRA9TVsSAnZWagAAnZ4P/j8n4HmF6+HKiYT4FU0/\nRHEIVTFSvUyC4IkM/MfQ3iQ2o8bzjJJvN9B4QZAaFu0ttwBCVAezZL0i5kUN\nd0CPxEd2sP3yxsh6AgUaY/Q9SD7VEeW+bpTEfm9pWAITSM2cyyR6nhgbOkNa\njTW1p+woeGOUcCAhAXiDf29MwCJxasiCzxSDNNXK/HQmJHzkeHO5VKv9v5ch\n9TFGnx2rmcvFLV/o0C+hxsm9R+PAxivxQf2Pf9hJTXXFFzU1ybH48kv3uHlF\nNPBXtHD7rB6AUEmnFYXtypDvp2onNCpd3zZFapdnEPEsm6pNfZ2HNDz5kT5z\nSFT9MqLMPmfgFeIwG4yEiqCFsowkbdjvJv0lAn+8WZmjwo4dG6/IIvHV+kRa\nyWM+MTwGq3Y2sUs3flvPvBYi7F5HxHML89gOGVCD7u+gmQbAyNwbkkh8LIce\nsqBusqafjjrDuQlWQ9svSO2Qn+CFggWAei5Yml14l4E+3jCv4/ei6eCbW6fl\nLphbPlMREfMYNM8ouCfLRq0jWZt6PngEpQxm9+fs4e0SUutholtxmQU5Y+L1\nzKEf6qsZFjhxXO6IZZELcVsEev6Zmzcjkap/WiUIxqL21amynkbAPVFoyC6X\nqt0G6jefDQlLg5Sik8izzj6gBMKNZIPvnq5dRASbw+Uqim5Co26wZJKjCWyp\nRB26\r\n=rLPa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmrnkaPGA5q4N4ul5VLPdhhUhJxPO7tMF87e2RK1ghNAiAwTS8zaUvoU5UxwnxUpFmqBtwEePTE6jC3RE9IJquMhA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0-canary.0af8ade5.0_1644271510837_0.5497521244354748"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-checkbox","version":"0.26.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/mwc-ripple":"^0.26.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0","@material/theme":"=14.0.0","@material/touch-target":"=14.0.0"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-klKjeSkJpYVIgvT70sdRkjWclC6M02gg586q/LffRNFSVVD3ShRJD9fRNTZs3/BVgoqXy/X7yfQjW8NHAuk8Qg==","shasum":"6aca7146a283379cddb5eff19067dea448d03ad7","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.0.tgz","fileCount":15,"unpackedSize":83787,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8woAObUUwDY+KAJhlmZAHJw4al7txIP/GgxoQoHqyIwIgPx6yv6KfGROO5ct2Kg6GnmoqRnMLLkgTsyRwDRkdNG0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNCQ//dkj/1jcawlgTVic09Q5HfoEzo6pZz/CxrYbvDrFF55qzRrqi\r\nJ6bxwY7nNJLboM57ZCs4+vQzYwBOTBnUO6zCeIMjdn1j4TZ+poae3GqQczhW\r\n9QhmzvqvrPf48Pc2KEUryLEtV+1kClIYnNPySOb+dGv6pACUcrOPXoaRaEDk\r\n5aWDM0Lmt0xfBykTFtTlvhzQWg9cEoVPk81jjGlcCzjh5R5RqzIQIAH5Sf8V\r\nhAzqwkFBHSLqyteKohvHNYQY3/A5cTIGvb2u2Palhuk/w6xmrjBxbEt6uI5O\r\njQsr9Q+f3/6IHkP86Uj+f21soaMT9T66fD63+ZKTIngpMj1B94PLpCxDqUMS\r\nQqD42nHjFDeLBa6z7R+63IH7Sdc+sdj6Xc32FxrP+fVX+Fv8aQBDzHzq4SR5\r\njdMFb8VbxFRaBejdiNmQ1rZFYVhJTZuszoJ+ikfzDWgpwPyl6FfQNCe5obZ9\r\nm/mk0Ek5hD43K8bWbbIeD/nkqUequ1++P+bSFTxS06l5jLqo0h75opq2mQ0T\r\nylHemeZ/MAqJLM3f9cWS8XdwlFyxvYrv3FI2nYIypk6XV+STsca2q6lERYp7\r\nt1kk+xiI488n4xjtkEJT2lvKfj/f1a2F0hA6693gBUYucDqdS6Eum9Bu8BlD\r\nrXlQ1k3NReJNDYiWQFQKWqzoxVvNUt17B4I=\r\n=mE7E\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.0_1651599033139_0.13450719553128776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-checkbox","version":"0.26.1","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/mwc-ripple":"^0.26.1","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","@material/touch-target":"=14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-2euxVZ0zksAQ/JVkOznUOGJKfbxq+m3ijRTh44b8fQyERBobm5QtWXbhXxV9YCesqFQSbj5M3qDw6Nm5MRKluw==","shasum":"f8cc5c15c6b0ea5136d053a77d3295717ae0f57a","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.26.1.tgz","fileCount":15,"unpackedSize":83971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGM/a2jjJIro0VCQ2MiUOttNYzyUD9Si2kUx4UZXUpdIAiAYAuIdq5xe98mMcHzN9MJZwX8JJqRvGbfElqE8/LCaxQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoASA/+N0W5B+S3k0chUP88fu14SBa9AmOOkKfJn5jcpP/PHKQLSU0O\r\nwX6HFQAd12NiDS4sdEWRvaDR1Ooj5V8yxsOMn3mETLnf84aaKVedvfta45Be\r\nEytnaiTxiPSh39QBOT8wooXeg5RTTBA4eTeBcMCZPhc5eVg8sUXB5tHXHolf\r\nulKcG8vfl6VTBuasbw15e3YT2f5b9VKBzB1qvD6gJG2DM9pJ+JX9qqZUmWpb\r\n450JaiGJ7sFL8NYuliyFuU/q+2oDxuugkD+26ltdnHhvkjt88yeoXhDIc8ov\r\nH2E8Hb343yvCk4AREek4YH1VvCd0M08U+/TwZmVkeCw+wrg80U7ruHZSatvY\r\nbyfEaWDqa5OYS09We32RUDP+jV90Il7HXZj2OCd17KO3toZHg9hYKTVCHoaF\r\n+WOwuybSC4Lw2QlI0DIldWeTlOh1nNfK5VwPLjNGBjCaU5WiO00VgaMVtvNX\r\nnnkPBOrHyuoO1FuRa7HKc6BrpRVCdqzfq8Ybn1NCXoWXwiYZvrxA5QIm23cn\r\nJ3IbJ9of/OJlbXHEM3nIRMgzXpbQMgCyflOCpPo7iyhueSr4RUrY6HNg/lM9\r\nYsxSlqrlA9CXaUu0aSmt7SGxfgjwaheqs6EYSqR7PvtC0bfUhu0sEMtCXz90\r\nHYyphzli8mo2ALjpKhm8ZkcoO4PczdFSqog=\r\n=QgiX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.26.1_1652128311482_0.9114204297604298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-checkbox","version":"0.27.0","description":"Material Design checkbox web component","keywords":["material design","web components","checkbox"],"main":"mwc-checkbox.js","module":"mwc-checkbox.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/mwc-ripple":"^0.27.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-checkbox.scss"},"devDependencies":{"@material/checkbox":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","@material/touch-target":"=14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-checkbox@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-EY0iYZLwo8qaqMwR5da4fdn0xI0BZNAvKTcwoubYWpDDHlGxDcqwvjp/40ChGo3Q/zv8/4/A0Qp7cwapI82EkA==","shasum":"a299252df96045e9c37a67ff0d5c3f3469f27ae4","tarball":"https://registry.npmjs.org/@material/mwc-checkbox/-/mwc-checkbox-0.27.0.tgz","fileCount":15,"unpackedSize":83971,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0PJGiYEsUmGlv26LnDEH30ayjQ3k41pqYhduAq7sf0AIgGHXJLT8thLjd5an53ZWz4BptAyPrBVhnBZKxgdbEWT4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcxw/5AfRkKC/zI5llHxkjRzd92cVftTswcyT9x208x8GoD9He+kOi\r\ne3vgL5AqkhDgD3itm2JZkJs3q02pdWJuRRpOKKmkbgFjA8xWyKzwk7GJcz44\r\nH6saIvQl/zf/CSwc5DnSeirNMDK5qP/On7Bm7mjidFiYQ2FHzepMLuuOwBR5\r\nnIi1rUu9ZUzB2PI4MGGZURs3WHBGpySyI/gxqKQsNXWm+n96v5pMSgKsnT+e\r\ndQ8V7V5pM0AucpIgMxTaTiNx5IOniQ8pXLKy5W5mxTlS30FweM5iYfC/CbED\r\nfgR0+SapniPg36D9Fw7BFvyXGx9WT3PAYXvSJLtqpVragSBCgOsv6/8Nr+x/\r\n3qqX/eHeFRgD1biKNlUhMUUVlq+2LaiBy9pfCmiC9d4vpQ29Zj/Gk/b4SWI9\r\n2h9Qpk8wdL3QBXNtut881UqF9fxcupiZZlB+8svFg7RyU2X0qcyWRB1KAwDV\r\nBQeCErSS77+kKdA7LrvVP1pBtVwMzP5FAzUur17TzP3Ak3tyb8UuznRhPORq\r\n/APP0oHvnMCb/NX7wRmoBv9VSofQ14AOcm9dWfjjrmju/c/hisL+eGmpvHSC\r\nWbFEA7OVHRZTBQrXEE8J1De7wVED4461IZgmkayPzmX+Ip0m9YiuK6y7R3ag\r\nTvxC1UOS28nvc+1N18mqad21U3bzSt6gmFU=\r\n=6oH1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-checkbox_0.27.0_1660331528818_0.3456747134646987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-05-08T00:04:28.597Z","0.1.0":"2018-05-08T00:04:28.792Z","modified":"2024-04-04T18:46:31.293Z","0.1.1":"2018-05-09T21:05:00.349Z","0.1.2":"2018-06-14T22:50:58.737Z","0.2.0":"2018-09-14T00:36:31.045Z","0.2.1":"2018-09-22T01:00:21.522Z","0.3.0":"2018-10-04T23:25:58.456Z","0.3.1":"2018-10-08T19:20:45.896Z","0.3.2":"2018-11-17T02:06:00.628Z","0.3.3":"2018-12-04T00:58:06.245Z","0.3.4":"2018-12-13T20:39:19.554Z","0.3.5":"2019-01-11T22:16:46.944Z","0.3.6":"2019-02-05T20:18:38.051Z","0.4.0":"2019-03-12T00:01:27.237Z","0.5.0":"2019-03-26T22:38:51.541Z","0.6.0":"2019-06-05T22:20:20.526Z","0.7.0":"2019-08-27T21:23:45.517Z","0.7.1":"2019-08-28T02:54:23.675Z","0.8.0":"2019-09-04T00:04:47.170Z","0.9.0":"2019-09-27T01:36:15.558Z","0.9.1":"2019-09-30T21:05:09.187Z","0.10.0":"2019-10-11T23:28:19.956Z","0.11.0":"2019-11-26T21:49:34.914Z","0.11.1":"2019-11-27T00:26:43.856Z","0.12.0":"2019-12-17T23:47:54.856Z","0.13.0":"2020-02-04T04:46:37.067Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:22.612Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:00.134Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:25.477Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:48.202Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:09.162Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:45.780Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:00.992Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:54.243Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:49.060Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:15.754Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:39.106Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:30.143Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:15.139Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:22.624Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:18.627Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:38.372Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:52.821Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:22.655Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:01.140Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:34.497Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:50.294Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:01.311Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:58.108Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:15.594Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:26.524Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:47.098Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:55.193Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:44.507Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:25.574Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:20.393Z","0.14.0":"2020-03-19T21:28:39.659Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:57.570Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:14.428Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:56.707Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:32.716Z","0.14.1":"2020-03-23T17:57:32.901Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:52.414Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:40.460Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:10.123Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:58.740Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:04.718Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:29.838Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:22.834Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:32.053Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:17.101Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:47.796Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:48.612Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:45.530Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:06.787Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:12.138Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:42.864Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:53.461Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:04.634Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:28.495Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:34.366Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:43.950Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:33.611Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:11.821Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:53.584Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:36.913Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:44.066Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:16.961Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:03.768Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:05.747Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:29.437Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:17.158Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:13.216Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:21.517Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:18.982Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:07.276Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:29.243Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:21.902Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:59.420Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:19.836Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:39.425Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:59.237Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:43.906Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:56.662Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:59.064Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:03.230Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:03.570Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:18.617Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:12.906Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:41.473Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:49.147Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:45.248Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:46.973Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:04.519Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:14.845Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:28.832Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:19.256Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:49.078Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:05.128Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:53.781Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:34.049Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:07.303Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:43.838Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:34.466Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:55.179Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:05.852Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:11.525Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:51.041Z","0.15.0":"2020-05-05T22:36:13.689Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:32.455Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:47.884Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:16.666Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:34.651Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:47.289Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:05.818Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:42.635Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:13.439Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:51.827Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:20.315Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:58.868Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:15.315Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:25.835Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:39.750Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:12.010Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:23.225Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:53.372Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:53.030Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:33.465Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:39.892Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:35.307Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:52.270Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:20.564Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:26.249Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:38.171Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:17.868Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:53.117Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:24.972Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:19.857Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:36.277Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:50.020Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:46.591Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:05.164Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:22.843Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:17.182Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:13.905Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:33.181Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:01.119Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:39.951Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:13.153Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:41.972Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:48.563Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:32.291Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:50.235Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:13.417Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:41.632Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:50.596Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:03.637Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:23.910Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:47.405Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:02.961Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:44.813Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:06.286Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:31.832Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:44.232Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:41.000Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:41.784Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:51.828Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:38.651Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:45.094Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:42.856Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:43.158Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:00.873Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:13.120Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:22.294Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:57.707Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:15.869Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:20.390Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:29:44.139Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:16.637Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:24.668Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:50.093Z","0.16.1":"2020-06-30T21:14:47.361Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:09.411Z","0.17.0":"2020-07-01T19:44:16.630Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:24.044Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:28.553Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:35.397Z","0.17.2":"2020-07-02T05:58:25.545Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:23.950Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:32.703Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:11.000Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:26.771Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:39.185Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:46.138Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:30.525Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:22.900Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:24.897Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:02.780Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:51.452Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:32.626Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:57.881Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:27.331Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:57.042Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:40.229Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:06.046Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:32.489Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:54.180Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:43:33.770Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:32.623Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:57.156Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:56.510Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:42.785Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:43.192Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:00.201Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:25.752Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:32.885Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:54.750Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:09.453Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:22.197Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:35.150Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:52.426Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:13.658Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:30.288Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:34.445Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:41.008Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:32.610Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:54.534Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:16.120Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:13.603Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:35.530Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:54.903Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:33.459Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:08.763Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:26.848Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:46.158Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:08.038Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:46.063Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:35.756Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:41.040Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:24.982Z","0.18.0":"2020-08-03T21:24:22.441Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:55.081Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:08.890Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:52.251Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:02.456Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:27.996Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:25.504Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:50.350Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:29.576Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:49.148Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:57.077Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:30.878Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:27.409Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:02.939Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:47.055Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:13.559Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:29.980Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:36.181Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:21.244Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:42.817Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:08.440Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:32.962Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:35.337Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:02.494Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:44.934Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:12.254Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:56.165Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:56.338Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:04.940Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:01.896Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:28.415Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:08.291Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:37.001Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:15.987Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:51.377Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:09.140Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:25.474Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:15.654Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:12.858Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:17.244Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:23.471Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:40.882Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:10.225Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:19.982Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:40.690Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:39.826Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:54.883Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:39.199Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:10.275Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:19.547Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:22.191Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:16.907Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:36.632Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:18.359Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:17.036Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:26.104Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:33.174Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:24.079Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:36.597Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:50.160Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:25.595Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:01.778Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:39.181Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:37.774Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:37.631Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:49.406Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:12.763Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:30.580Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:22.042Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:35.532Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:28.357Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:16.811Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:15.528Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:57.839Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:29.153Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:00.505Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:10.444Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:26.772Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:48.607Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:36.631Z","0.19.0":"2020-10-07T22:33:21.162Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:47.871Z","0.19.1":"2020-10-08T23:05:51.705Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:12.938Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:23.389Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:17.908Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:24.804Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:54.702Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:30.311Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:29.778Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:18.196Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:06.153Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:16.711Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:56.660Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:06.801Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:10.410Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:03.935Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:44.361Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:40.770Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:48.291Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:53.938Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:48.364Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:00.121Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:01.175Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:11.409Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:07.323Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:49.496Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:32.432Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:06.665Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:15.564Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:53.581Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:13.889Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:47.311Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:13.384Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:58.775Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:41.802Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:22.418Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:44.243Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:15.673Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:19.604Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:19.342Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:16.736Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:55.556Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:32.039Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:16.427Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:21.449Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:52.202Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:07.016Z","0.20.0":"2020-12-03T22:28:47.167Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:56.347Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:00.250Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:03.138Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:52.358Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:50.383Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:13.750Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:45.902Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:44.131Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:39.929Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:20.748Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:13.415Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:08.250Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:32.282Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:05.025Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:16.238Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:07.124Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:35.509Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:17.505Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:19.114Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:30.079Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:34.812Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:22.942Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:21.139Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:48.490Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:29.184Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:41.605Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:40.926Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:36.770Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:34.650Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:30.003Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:28.864Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:51.440Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:56.111Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:19.666Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:35.796Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:06.601Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:19.353Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:31.124Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:12.962Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:46.573Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:44.752Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:30.204Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:49.046Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:08.500Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:21.572Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:37.432Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:08.323Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:10.880Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:00.930Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:10.265Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:27.029Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:55.910Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:08.909Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:10.573Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:34.563Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:58.749Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:08.132Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:22.879Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:24.002Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:03.980Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:13.667Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:13.242Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:29.742Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:48.797Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:47:38.388Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:15.012Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:45.330Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:20.090Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:12.525Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:37.215Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:43.052Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:33.750Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:16.673Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:27.475Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:01.511Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:48.434Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:21.246Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:38.000Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:46.305Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:29.628Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:57.103Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:51.985Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:04.003Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:29.628Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:28.329Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:56.029Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:41.338Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:07.897Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:47.652Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:23.301Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:09.392Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:59.856Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:24.901Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:58.479Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:35.687Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:27.574Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:46.283Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:22.650Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:35.525Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:13.407Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:15.767Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:28.794Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:06.777Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:12.168Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:27.974Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:50.251Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:56.426Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:06.554Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:34.706Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:43.007Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:35.035Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:15.132Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:57.994Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:21.228Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:00.515Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:25.755Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:07.961Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:05.667Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:40.821Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:14.742Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:34.266Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:22.102Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:32.977Z","0.21.0":"2021-04-30T23:58:08.219Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:20.788Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:16.922Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:40.432Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:44.241Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:00.873Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:28.187Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:16.511Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:01.825Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:55.700Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:24.027Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:18.124Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:33.298Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:39.893Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:21.925Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:10.803Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:42.550Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:32.283Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:26.775Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:27.365Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:16.632Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:26.232Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:54.155Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:31.691Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:06.534Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:42.659Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:34.818Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:57.475Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:17.394Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:05.379Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:04.491Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:30.701Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:52.023Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:20.243Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:25.231Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:29.350Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:30.951Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:08.661Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:15.602Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:21.725Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:12.501Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:18.917Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:23.854Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:09.784Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:09.926Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:34.075Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:13.824Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:45.636Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:07.171Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:24.465Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:57.467Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:47.165Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:39.489Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:07.946Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:10.599Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:05.553Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:19.634Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:50.616Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:07.081Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:26.635Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:24.309Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:18.863Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:35.244Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:47.726Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:52.743Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:37.192Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:08.109Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:42.969Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:41.958Z","0.22.0":"2021-07-14T22:38:55.579Z","0.22.1":"2021-07-14T22:52:53.077Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:09.354Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:36.780Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:46.527Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:42.592Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:06.896Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:51.852Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:02.865Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:18.702Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:51.505Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:11.040Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:41.163Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:10.464Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:44.260Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:48.650Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:39.712Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:42.374Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:41.570Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:01.207Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:58.353Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:08.717Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:17.049Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:19.455Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:53.043Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:58.324Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:09.805Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:11.742Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:31.544Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:28.341Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:12.788Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:55.222Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:52.555Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:50.946Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:33.941Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:46.172Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:59.135Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:33.000Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:54.976Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:37.882Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:59.721Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:03.715Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:45.838Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:09.730Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:18.068Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:05.117Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:31.192Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:26.214Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:28.809Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:19.546Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:27.025Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:26.461Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:37.513Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:18.995Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:45.827Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:05.310Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:23.119Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:00.446Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:47.705Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:06.382Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:20.696Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:59.308Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:50.943Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:04.557Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:51.692Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:40.896Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:05.736Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:36.907Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:51.032Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:18.477Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:30.480Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:43.364Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:53.244Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:28.215Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:03.723Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:49.648Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:26.227Z","0.23.0":"2021-09-13T21:35:47.051Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:14.262Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:18.104Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:24.412Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:25.365Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:00.120Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:17.743Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:56.284Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:42.561Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:19.705Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:49.520Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:43.375Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:11.064Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:50.150Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:12.782Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:57.975Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:53.604Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:49.715Z","0.25.0":"2021-09-21T02:53:04.408Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:14.306Z","0.25.1":"2021-09-21T03:12:42.762Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:11.609Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:20.239Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:51.535Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:41.680Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:12.204Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:25.404Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:35.579Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:54.172Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:53.282Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:56.686Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:20.684Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:37.100Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:18.906Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:24.951Z","0.25.2":"2021-10-11T23:18:33.545Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:32.680Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:00.256Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:41.167Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:33.560Z","0.25.3":"2021-10-21T17:55:44.576Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:31.147Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:59.060Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:50.119Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:28.751Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:55.416Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:38.136Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:03.252Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:07.018Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:58.324Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:30.945Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:15.892Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:13.627Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:46.216Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:03.349Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:42.410Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:11.259Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:58.235Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:51.355Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:54.405Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:11.258Z","0.26.0":"2022-05-03T17:30:33.309Z","0.26.1":"2022-05-09T20:31:51.610Z","0.27.0":"2022-08-12T19:12:09.045Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design checkbox web component","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/checkbox"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-checkbox>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-checkbox.svg)](https://www.npmjs.com/package/@material/mwc-checkbox)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nCheckboxes allow the user to select one or more items from a set. Checkboxes can\nbe used to turn an option on or off.\n\n[Material Design Guidelines: Checkboxes](https://material.io/components/selection-controls/#checkboxes)\n\n[Demo](https://material-components.github.io/material-web/demos/checkbox/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-checkbox\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Standard\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/checked.png\" width=\"29px\" height=\"29px\">\n\n```html\n<mwc-checkbox checked></mwc-checkbox>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox/mwc-checkbox.js';\n\n  const checkbox = document.body.querySelector('mwc-checkbox')\n  checkbox.addEventListener('change', () => {\n    console.log(`checkbox changed to ${checkbox.checked}`);\n  });\n</script>\n```\n\n### Standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/standard_disabled.png\" height=\"80px\">\n\n```html\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### Styled standard, disabled\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/styled_standard_disabled.png\" height=\"80px\">\n\n```html\n<style>\n  body {\n    background-color: #363636;\n\n    --mdc-theme-secondary: #ff2929;\n    --mdc-checkbox-unchecked-color: white;\n    /* Required for unchecked focus ripple */\n    --mdc-theme-on-surface: white;\n    --mdc-checkbox-disabled-color: #adadad;\n    --mdc-checkbox-ink-color: #363636;\n  }\n</style>\n\n<div>\n  <mwc-checkbox></mwc-checkbox>\n  <mwc-checkbox checked></mwc-checkbox>\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</div>\n\n<div>\n  <mwc-checkbox disabled></mwc-checkbox>\n  <mwc-checkbox disabled checked></mwc-checkbox>\n  <mwc-checkbox disabled indeterminate></mwc-checkbox>\n</div>\n```\n\n### With Form Field\n\nMost applications should use\n[`<mwc-formfield>`](https://github.com/material-components/material-web/tree/master/packages/formfield)\nto associate an interactive label with the checkbox.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/formfield.png\" width=\"132px\" height=\"123px\">\n\n```html\n<style>\n  mwc-formfield {\n    display: block;\n  }\n  .child {\n    margin-left: 20px;\n  }\n</style>\n\n<mwc-formfield label=\"Additions\">\n  <mwc-checkbox indeterminate></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Pickles\">\n  <mwc-checkbox class=\"child\"></mwc-checkbox>\n</mwc-formfield>\n\n<mwc-formfield label=\"Tomato\">\n  <mwc-checkbox class=\"child\" checked></mwc-checkbox>\n</mwc-formfield>\n\n<script type=\"module\">\n  import '@material/mwc-checkbox/mwc-checkbox.js';\n  import '@material/mwc-formfield/mwc-formfield.js';\n</script>\n```\n\n## API\n\n### Properties/Attributes\n\nName            | Type      | Default | Description\n-------------------- | --------- | ------- | -----------\n`checked`            | `boolean` | `false` | Whether the checkbox is checked.\n`indeterminate`      | `boolean` | `false` | When a checkbox is the parent of a set of child checkboxes, the *indeterminate* state is used on the parent to indicate that some but not all of its children are checked.\n`disabled`           | `boolean` | `false` | When `true`, the checkbox cannot be interacted with, and renders in muted colors.\n`value`              | `string`  | `''`    | The value that will be included if the checkbox is submitted in a form.\n`reducedTouchTarget` | `boolean` | `false` | When `true`, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.\n\n\n### Methods\n\n*None*\n\n### Events\n\n| Event Name | Target         | Detail | Description\n| ---------- | -------------- | ------ | -----------\n| `change`   | `mwc-checkbox` | `{}`   | Fired when the user modifies the checkbox `checked` or `indeterminate` states from an input device interaction. Note that, like [native `<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event), the `change` event is *not* fired when the `checked` or `indeterminate` properties are set from JavaScript.\n\n### CSS Custom Properties\n\nName                             | Default                                                       | Description\n-------------------------------- | ------------------------------------------------------------- | -----------\n`--mdc-checkbox-ink-color`       | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/color_fff.png) `#fff`                     | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n`--mdc-checkbox-unchecked-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/color_0,0,0,54.png) `rgba(0, 0, 0, 0.54)` | Color of the unchecked box.\n`--mdc-checkbox-disabled-color`  | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/checkbox/images/color_0,0,0,38.png) `rgba(0, 0, 0, 0.38)` | Color of the checkbox box and fill when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n|`--mdc-theme-secondary`               | Background color when the checkbox is `checked` or `indeterminate`, and the base color of the ripple effect and focus halo.\n|`--mdc-theme-on-surface`              | Color of mark inside a `checked` or `indeterminate` checkbox (enabled or disabled).\n\n## Additional references\n\n-   [MDC Web Checkboxes](https://material.io/develop/web/components/input-controls/checkboxes/)\n","readmeFilename":"README.md","keywords":["material design","web components","checkbox"]}